在使用 Vite 構(gòu)建前端項(xiàng)目時(shí)，vite.config.js文件是必不可少的一部分。這個(gè)文件用于配置 Vite 的各種選項(xiàng)，包括開發(fā)服務(wù)器、構(gòu)建設(shè)置、插件等。本文將詳細(xì)介紹vite.config.js文件中常見的配置項(xiàng)及其用途。

一、基本配置

首先，我們來看一下 vite.config.js 文件的結(jié)構(gòu)：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
    base: '/',//解決js，css路徑錯(cuò)誤問題
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
    }
})

1. base

設(shè)置應(yīng)用的基本路徑。應(yīng)用打包后訪問的路徑，這個(gè)文件涉及到css、js等文件的路徑問題。

假設(shè)你的應(yīng)用部署在https://example.com/applet/，而不是服務(wù)器的根目錄https://example.com/。你需要將 base 設(shè)置為/applet/，這樣構(gòu)建后的資源路徑會(huì)變成https://example.com/applet/xxx/xxx。

我們可以設(shè)置相對(duì)路徑，而不需要設(shè)置具體的項(xiàng)目路徑：

export default defineConfig({
    base: process.env.NODE_ENV === 'production' ? './' : '/',//解決js，css路徑錯(cuò)誤問題
})

我這里使用了環(huán)境變量，如果打包正式環(huán)境，使用相對(duì)路徑獲取靜態(tài)資源，如果是debug模式直接訪問根目錄。

2. proxy

配置開發(fā)服務(wù)器的代理規(guī)則，常用于解決跨域問題。這幾乎是所有項(xiàng)目中必須配置的選項(xiàng)之一。配置方式如下：

export default defineConfig({
    server: {
        proxy: {
            '/manage': {
              target: 'https://motui8.cn/',
              changeOrigin: true
            }
        }
    }
})

其中/manage是我們服務(wù)器url的開頭，target表示服務(wù)器的域名。大至意思是請(qǐng)求的api，如果是以/manage開頭的統(tǒng)統(tǒng)代理到target域名上。

二、打包路徑配置

在vue3中，vite提供了一個(gè)build參數(shù)，讓我們配置打包后保存目錄等相關(guān)配置。配置方式如下：

export default defineConfig({
    build: {
        outDir: '../public/admin',
        chunkSizeWarningLimit: 2048,
        emptyOutDir: true
    }
})

1. outDIr

vue3打包后項(xiàng)目保存的路徑，可以是相對(duì)路徑，也可以是絕對(duì)路徑

2. chunkSizeWarningLimit

vue3打包后塊的最大大小，默認(rèn)是500kb。如果不設(shè)置此參數(shù)，打包時(shí)如果某個(gè)文件的大于500kb會(huì)報(bào)錯(cuò)，我們可以將打包后的塊設(shè)置的更大一些，列如：2048kb，也就是2兆

3. emptyOutDir

打包時(shí)是否將輸出目錄之前的文件夾清空。如果設(shè)置為true，每次打包都會(huì)將輸出目錄中的所有文件全部刪除，再把打包后的文件輸出到輸出目錄