在使用 Vite 構建前端項目時，vite.config.js文件是必不可少的一部分。這個文件用于配置 Vite 的各種選項，包括開發服務器、構建設置、插件等。本文將詳細介紹vite.config.js文件中常見的配置項及其用途。

一、基本配置

首先，我們來看一下 vite.config.js 文件的結構：

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路徑錯誤問題
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
    }
})

1. base

設置應用的基本路徑。應用打包后訪問的路徑，這個文件涉及到css、js等文件的路徑問題。

假設你的應用部署在https://example.com/applet/，而不是服務器的根目錄https://example.com/。你需要將 base 設置為/applet/，這樣構建后的資源路徑會變成https://example.com/applet/xxx/xxx。

我們可以設置相對路徑，而不需要設置具體的項目路徑：

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

我這里使用了環境變量，如果打包正式環境，使用相對路徑獲取靜態資源，如果是debug模式直接訪問根目錄。

2. proxy

配置開發服務器的代理規則，常用于解決跨域問題。這幾乎是所有項目中必須配置的選項之一。配置方式如下：

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

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

二、打包路徑配置

在vue3中，vite提供了一個build參數，讓我們配置打包后保存目錄等相關配置。配置方式如下：

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

1. outDIr

vue3打包后項目保存的路徑，可以是相對路徑，也可以是絕對路徑

2. chunkSizeWarningLimit

vue3打包后塊的最大大小，默認是500kb。如果不設置此參數，打包時如果某個文件的大于500kb會報錯，我們可以將打包后的塊設置的更大一些，列如：2048kb，也就是2兆

3. emptyOutDir

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