快捷導(dǎo)航

vue3中vite.config.js相關(guān)常用配置超詳細(xì)講解

更新時(shí)間：2025年04月03日 08:57:15 作者：陌上花開

在Vue3項(xiàng)目中vite.config.js文件是Vite構(gòu)建工具的配置文件,它用于定義項(xiàng)目的構(gòu)建和開發(fā)選項(xiàng),這篇文章主要介紹了vue3中vite.config.js相關(guān)常用配置的相關(guān)資料,需要的朋友可以參考下

base（默認(rèn)為/）開發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑。合法的值包括以下幾種：

絕對(duì) URL 路徑名，例如 /foo/ 部署在根目錄下的foo文件下頁(yè)面路徑為： https://foo.com/foo/

完整的 URL，例如 https://foo.com/（默認(rèn)為/）部署在根目錄下

空字符串或 ./（用于嵌入形式的開發(fā)）可用于部署在任何路徑下

** 注意點(diǎn)：**

== vue3 vite.config.js 中配置的base路徑，當(dāng)訪問過程中需要使用動(dòng)態(tài)連接的 url 時(shí)，可以使用全局注入的 import.meta.env.BASE_URL 變量，它的值為公共基礎(chǔ)路徑；vue2 中通過process.env.BASE_URL 獲取 ==

plugins：插件列表，可以是自定義的Vite插件或第三方插件，用于擴(kuò)展Vite功能

resolve：用于配置模塊解析。例如，可以設(shè)置resolve.alias來設(shè)置路徑別名，簡(jiǎn)化導(dǎo)入語句。

server：配置開發(fā)服務(wù)器。例如，可以設(shè)置server.port來指定端口，或者server.host來指定主機(jī)

build：配置構(gòu)建輸出

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { build } from 'vite'
import vue from '@vitejs/plugin-vue'
const __dirname = fileURLToPath(new URL('.', import.meta.url))
export default defineConfig({
  base: '/screen',//指定了應(yīng)用程序在服務(wù)器上的根目錄位置，設(shè)置連接前綴
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
   server: {
    open: '/docs/index.html',//開發(fā)服務(wù)器啟動(dòng)時(shí)，自動(dòng)在瀏覽器中打開應(yīng)用程序。
    proxy: {//代理
       port: 3000,
       host: 'localhost',
       cors： true,//為開發(fā)服務(wù)器配置 CORS。默認(rèn)啟用并允許任何源，傳遞一個(gè) 選項(xiàng)對(duì)象 來調(diào)整行為或設(shè)為 false 表示禁用。
      // 字符串簡(jiǎn)寫寫法：http://localhost:5173/foo -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // 帶選項(xiàng)寫法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      build: {
        outDir: 'dist',//指定輸出路徑（相對(duì)于 項(xiàng)目根目錄).
        assetsDir: 'assets',//指定生成靜態(tài)資源的存放路徑
	    rollupOptions: {
	      // ...
	    }
  }
})

總結(jié)

到此這篇關(guān)于vue3中vite.config.js相關(guān)常用配置超詳細(xì)講解的文章就介紹到這了,更多相關(guān)vue3 vite.config.js常用配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: