當(dāng)以命令行方式運(yùn)行 vite 時(shí)，Vite 會(huì)自動(dòng)解析 項(xiàng)目根目錄下名為 vite.config.js（或 vite.config.ts） 的文件。

一、使用 vite 創(chuàng)建的項(xiàng)目里默認(rèn)的配置

使用 vite 創(chuàng)建項(xiàng)目完成后會(huì)自動(dòng)生成 一個(gè) vite.config.js 文件，當(dāng)然你可以將其名重定義為 vite.config.ts 文件。其默認(rèn)代碼如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
 plugins: [vue()],
})

二、vite 區(qū)分不同環(huán)境的配置

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    return {
      // dev 獨(dú)有配置
    }
  } else {
    // command === 'build'
    return {
      // build 獨(dú)有配置
    }
  }
})

如果配置需要調(diào)用一個(gè)異步函數(shù)，也可以轉(zhuǎn)而導(dǎo)出一個(gè)異步函數(shù)：

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // 構(gòu)建模式所需的特有配置
  }
})

三、vite 基本配置匯總

1. 配置本地服務(wù)（開發(fā)服務(wù)器選項(xiàng)）

本地運(yùn)行時(shí)的服務(wù)設(shè)置，包括：

• host：string | boolean，服務(wù)器 IP 地址。
• port：number，服務(wù)器端口號(hào)。
• strictPort：boolean，設(shè)為 true 時(shí)若端口已被占用則會(huì)直接退出，而不是嘗試下一個(gè)可用端口。
• https：boolean | https.ServerOptions，是否啟用 https。
• open：boolean | string，設(shè)置服務(wù)器啟動(dòng)時(shí)自動(dòng)在瀏覽器中打開的應(yīng)用程序。
• proxy：Record<string, string | ProxyOptions>，為開發(fā)服務(wù)器配置自定義代理規(guī)則。
• cors：boolean | CorsOptions，為開發(fā)服務(wù)器配置 CORS。默認(rèn)啟用并允許任何源。
• headers：OutgoingHttpHeaders，指定服務(wù)器響應(yīng)的 header。
• force：boolean，設(shè)置為 true 強(qiáng)制使依賴預(yù)構(gòu)建。
• hmr：boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: - - boolean, clientPort?: number, server?: Server }，禁用或配置 HMR 連接。
• watch：object，傳遞給 chokidar 的文件系統(tǒng)監(jiān)聽器選項(xiàng)。
• middlewareMode：‘ssr’ | ‘html’，以中間件模式創(chuàng)建 Vite 服務(wù)器。（不含 HTTP 服務(wù)器）
• base：string | undefined，在 HTTP 請(qǐng)求中預(yù)留此文件夾，用于代理 Vite 作為子文件夾時(shí)使用。應(yīng)該以 / 字符開始和結(jié)束。
• fs
  strict：boolean，限制為工作區(qū) root 路徑以外的文件的訪問。
  allow：string[]，限制哪些文件可以通過 /@fs/ 路徑提供服務(wù)。
  deny：string[]，用于限制 Vite 開發(fā)服務(wù)器提供敏感文件的黑名單。
  origin：string，用于定義開發(fā)調(diào)試階段生成資產(chǎn)的 origin。

例如：

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: '3000',
    proxy: {
      // 字符串簡(jiǎn)寫寫法
      '/foo': 'http://localhost:4567',
      // 選項(xiàng)寫法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正則表達(dá)式寫法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // 使用 proxy 實(shí)例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的實(shí)例
        }
      },
      // 代理 WebSocket 或 socket
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
   }
})

2、配置 @ 符號(hào)

需要先安裝 @types/node 插件：

npm i -D @types/node

然后，在 vite.config.ts 文件中增加以下配置：

import { resolve } from "path"
 
export default defineConfig({
  // 配置 @ 符號(hào)
  resolve: {
    alias: {
      "@": resolve(__dirname, "src")
    }
  }
})

如果你用到了 ts，需要在 tsconfig.json 的配置文件中增加以下配置：

{
  "compilerOptions": {
   "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "#/*": ["types/*"]
    },
  },

以上配置完成后，凡是在 src 文件下的相對(duì)路徑都可以寫成 @ 符號(hào)了。