# [vite.config.js](https://cn.vitejs.dev/config/)
## 示例1：
```js
import { defineConfig } from "vite"; // 使用 defineConfig 幫手函數，這樣不用 jsdoc 注解也可以獲取類型提示
import vue from "@vitejs/plugin-vue";
const { resolve } = require("path");
export default ({ command, mode }) => {
let isProd = command === "serve"; // 情景配置 是否為開發模式 serve 或 build
return defineConfig({
/**
* 在生產中服務時的基本公共路徑。
* @default '/'
*/
base: "/huangbiao",
/**
* 與“根”相關的目錄，構建輸出將放在其中。如果目錄存在，它將在構建之前被刪除。
* @default 'dist'
*/
outDir: "target",
// port: 3000,
// 是否自動在瀏覽器打開
open: true,
// 是否開啟 https
https: false,
// 服務端渲染
ssr: false,
//文件名哈希
filenameHashing: true,
//查看插件API獲取Vite插件的更多細節 https://www.vitejs.net/guide/api-plugin.html
plugins: [vue()],
// 是否在保存的時候使用 `eslint-loader` 進行檢查。
lintOnSave: true,
// 是否使用帶有瀏覽器內編譯器的完整構建版本
runtimeCompiler: false,
// 是否為生產環境構建生成 source map？
productionSourceMap: true,
// 設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標簽的 crossorigin 屬性。
crossorigin: "",
//? 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標簽上啟用 Subresource Integrity (SRI)。
? ? integrity: false,
//? 調整內部的 webpack 配置
? ? configureWebpack: () => {}, //(Object | Function)
? ? chainWebpack: () => {},
resolve: {
alias: {
// 設置為@則使用時為"@/components/index.module.css"
"@": resolve(__dirname, "./src"),
// 使用時為"@components/HelloWorld.vue"
"@components": resolve(__dirname, "./src/components")
}
},
// 強制預構建插件包
// 會將引入的第三方文件移動到E:\gitcode\工程目錄\node_modules\.vite_opt_cache目錄中 看圖1
// 可通過import Mock from 'axios'使用
optimizeDeps: {
include: ["axios"]
},
server: {
// 默認啟用并允許任何源
cors: true,
host: '0.0.0.0',
// 本地服務端口
port: 8006,
hotOnly: false,
// 設為 true 時若端口已被占用則會直接退出，而不是嘗試下一個可用端口
strictPort: true,
// 代理
proxy: {
// 字符串簡寫寫法
// '/foo': 'http://localhost:4567/foo',
// 選項寫法
// '/api': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
// },
// 正則表達式寫法
// '^/fallback/.*': {
// target: 'http://jsonplaceholder.typicode.com',
// changeOrigin: true,
// rewrite: (path) => path.replace(/^\/fallback/, '')
// }
}
},
// CSS 相關選項
css: {
// 將組件內的 CSS 提取到一個單獨的 CSS 文件 (只用在生產環境中)
// 也可以是一個傳遞給 `extract-text-webpack-plugin` 的選項對象
extract: true, // 是否開啟 CSS source map？
sourceMap: false, // 為預處理器的 loader 傳遞自定義選項。比如傳遞給 // Css-loader 時，使用 `{ Css: { ... } }`。
loaderOptions: {
css: {
// 這里的選項會傳遞給 css-loader
},
postcss: {
// 這里的選項會傳遞給 postcss-loader
}
}, // 為所有的 CSS 及其預處理文件開啟 CSS Modules。 // 這個選項不會影響 `*.vue` 文件。
modules: false
},
build: {
// 基本路徑
publicPath: "./",
target: "modules",
//指定輸出路徑（相對于 項目根目錄). 建議使用系統默認
outDir: "dist",
// 指定生成靜態資源的存放路徑（相對于 build.outDir）
assetsDir: "assets",
minify: "terser" // 混淆器，terser構建后文件體積更小
}
// 在生產環境下為 Babel 和 TypeScript 使用 `thread-loader`
? ? // 在多核機器下會默認開啟。
? ? parallel: require('os').cpus().length > 1,
? ? // PWA 插件的選項。
? ? // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
? ? pwa: {},
? ? // 三方插件的選項
? ? pluginOptions: {
? ? ? ? // ...
? ? }
});
};
```
## 示例 2
````js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
/*
//* 也可以使用函數來進行判斷是否要根據模式做一些處理
@params {
command: 'build' | 'serve';
mode: string;
}
@example
export default ({ command, mode }) => {
return defineConfig({})
}
*/
// https://vitejs.dev/config/
// 這個函數就做了一個添加類型的作用
/*
export function defineConfig(config: UserConfigExport): UserConfigExport {
return config
}
*/
export default defineConfig({
// 類型: string
// default: process.cwd()
// 項目根目錄，可以是一個絕對路徑，或者是一個相對于該配置文件本身的路徑
root: process.cwd(),
// 類型: string
// default: /,
// 開發或者生產環境服務的公共基礎路徑，合法的值包括
/*
1. 絕對url路徑名，如`/foo/`
2. 完整的url，如`https://foo.com/`
3. 空字符串或`./`（用于開發環境）
*/
base: '/',
// 類型: string,
// 默認: command為serve時默認為`development`，為build時默認為`production`
// 在配置中指明將會把`serve`和`build`時的模式都覆蓋掉
// 可以通過命令行`--mode`來重寫
mode: 'development',
// 類型: Record<string, any>
// 定義全局變量替換方式，每項在開發時會被定義為全局變量，而在構建時則是靜態替換
/*
1. 從 2.0.0-beta.70 版本開始，字符串值將作為一個直接的表達式，所以如果定義為了一個字符串常量，它需要被顯式地引用（例如：通過 JSON.stringify）
2. 替換知會在匹配到周圍是單詞邊界(\b)時執行
*/
define: {
a: 123,
},
/*
interface Plugin extends RollupPlugin {
enforce?: 'pre' | 'post',
apply?: 'serve' | 'build',
config?: (config: UserConfig, env: ConfigEnv) => UserConfig | null | void,
configResolved?: (config: ResolvedConfig) => void,
configureServer?: ServerHook,
transformIndexHtml?: IndexHtmlTransform,
handleHotUpdate?(
ctx: HmrContext
): Array<ModuleNode> | void | Promise<Array<ModuleNode> | void>,
resolveId?(
this: PluginContext,
source: string,
importer: string | undefined,
options: { custom?: CustomPluginOptions },
ssr?: boolean
): Promise<ResolveIdResult> | ResolveIdResult
load?(
this: PluginContext,
id: string,
ssr?: boolean
): Promise<LoadResult> | LoadResult
transform?(
this: TransformPluginContext,
code: string,
id: string,
ssr?: boolean
): Promise<TransformResult> | TransformResult
}
*/
// 類型：(Plugin | Plugin[])[]
// 需要用的的插件，配置模式的時候在這兒配置
/*
@example
vue:
```ts
import vue from '@vitejs/plugin-vue'
...
plugins: [vue()]
```
react:
```ts
import reactRefresh from '@vitejs/plugin-react-refresh'
...
plugins: [reactRefresh()]
```
*/
plugins: [vue()],
// 類型: string
// 默認: public
// 作為靜態資源服務的文件夾。這個目錄中的文件會再開發中被服務于 /，在構建時，會被拷貝到 outDir 根目錄，并沒有轉換，永遠只是復制到這里。該值可以是文件系統的絕對路徑，也可以是相對于項目根的路徑。
publicDir: path.resolve(__dirname, 'public'),
// 解析配置
resolve: {
// 類型: Record<string, string> | Array<{ find: string | RegExp, replacement: string }>
// 別名
// 將會被傳遞到 @rollup/plugin-alias 作為它的 entries。也可以是一個對象，或一個 { find, replacement } 的數組
// 當使用文件系統路徑的別名時，請始終使用絕對路徑。相對路徑作別名值將按原樣使用導致不會解析到文件系統路徑中。
alias: {
'@': path.resolve(__dirname, 'src'),
},
// 類型: string[]
// 如果你在你的應用程序中有相同依賴的副本（比如monorepos），使用這個選項來強制vite總是將列出的依賴關系解析到相同的副本（從項目根目錄）
dedupe: [],
// 類型: string[]
// 在解析包的情景導出時允許的附加條件
/*
一個帶有情景導出的包可能在它的package.json中有以下exports字段
```json
{
"exports": {
".": {
"import": "./index.esm.js",
"require": "./index.cjs.js"
}
}
}
```
在這里，`import`和`require`被稱為‘情景’。情景可以嵌套，并且應該從最特定的到最不特定的指定。
*/
// Vite 有一個“允許的情景”列表和并且會匹配列表中第一個情景。默認允許的情景是：import，module，browser，default，和基于當前情景為 production/development。resolve.conditions 配置項使得可以指定其他允許的情景。
conditions: [],
// 類型: string[],
// 默認: ['module', 'jsnext:main', 'jsnext']
// `package.json`中，在解析包的入口點時嘗試的字段列表。注意，這比從`exports`字段解析的情景導出優先級低。
// 如果一個入口點從`exports`成功解析，主字段將被忽略
mainFields: [],
// 類型: string[]
// 默認: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
// 導入時想要省略的擴展名列表。
// 注意：不建議忽略自定義導入類型的擴展名（例如：`.vue`），因為它會干擾IDE和類型支持
extensions: [],
},
// css配置
css: {
/*
@types
```ts
interface CSSModulesOptions {
scopeBehaviour?: 'global' | 'local'
globalModulePaths?: string[]
generateScopedName?:
| string
| ((name: string, filename: string, css: string) => string)
hashPrefix?: string
//* 默認：'camelCaseOnly'
localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly'
}
```
*/
// 配置`css modules`的行為，選項將被傳遞給`postcss-modules`
modules: {},
// 類型: string | (postcss.ProcessOptions & { plugins?: postcss.Plugin[] })
// 內聯的PostCss配置（格式同postcss.config.js），或者一個（默認基于項目根目錄的）自定義的PostCss配置路徑。
// 其路徑搜索是通過`postcss-load-config`實現的
//* 注意：如果提供來該內聯配置，vite將不會搜索其他PostCss配置源
postcss: '',
// 類型: Record<string, object>
/*
指定傳遞給CSS預處理器的選項，例如：
```js
export default {
css: {
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;`
}
}
}
}
```
*/
preprocessorOptions: {},
},
// json配置
json: {
// 類型: boolean
// 默認: true
// 是否支持從`.json`文件中進行按名導入
namedExports: true,
// 類型: boolean
// 默認: false
// 若設置為 true，導入的 JSON 會被轉換為 export default JSON.parse("...") 會比轉譯成對象字面量性能更好，尤其是當 JSON 文件較大的時候
//* 開啟此項，則會禁用按名導入
stringify: false,
},
// esbuild配置（vite使用了esbuild來進行編譯）
// 類型: ESBuildOptions | false
/*
ESBuildOptions繼承自esbuild轉換選項(https://esbuild.github.io/api/#transform-api)
最常見的用例是自定義JSX
```js
export default {
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment'
}
}
```
默認情況下，ESbuild 應用在 ts、jsx、tsx 文件。你可以通過 esbuild.include 和 esbuild.exclude 對其進行配置，它們兩個配置的類型是string | RegExp | (string | RegExp)[]。
設置成 false 可以禁用 ESbuild 轉換（默認應用于 .ts. .tsx 和 .jsx 文件）。
*/
/*
此外，你還可以通過esbuild.jsxInject來自動為每一個被 ESbuild 轉換的文件注入 JSX helper。
```js
export default {
esbuild: {
jsxInject: `import React from 'react'`
}
}
```
*/
esbuild: {},
// 靜態文件處理配置
// 類型: string | RegExp | (string | RegExp)[]
// 相關內容（https://cn.vitejs.dev/guide/assets.html）
// 指定其他文件類型作為靜態資源處理（這樣導入它們就會返回解析后的 URL）
assetsInclude: '',
// 日志級別配置
// 類型: 'info' | 'warn' | 'error' | 'silent'
// 調整控制臺輸出的級別，默認為`info`
logLevel: 'info',
// 是否清屏
// 類型: boolean
// 默認: true
// 設為 false 可以避免 Vite 清屏而錯過在終端中打印某些關鍵信息。命令行模式下請通過 --clearScreen false 設置。
clearScreen: true,
// 服務相關配置
server: {
// 類型: string
// 指定服務器主機名
host: 'localhost',
// 類型: number
// 指定服務器端口。
//* 注意：如果端口已經被使用，Vite 會自動嘗試下一個可用的端口，所以這可能不是服務器最終監聽的實際端口。
port: 10086,
// 類型: boolean
// 設為true時若端口已被占用則會直接退出，而不是嘗試下一個可用端口
strictPort: false,
// 類型: boolean | https.ServerOptions
// 啟用 TLS + HTTP/2。注意當 server.proxy option 也被使用時，將會僅使用 TLS。
// 這個值也可以是一個傳遞給 https.createServer() 的 選項對象。
https: false,
// 類型: boolean | string
// 在服務器啟動時自動在瀏覽器中打開應用程序
/*
注意: 當此值為字符串時，會被用作URL的路徑名
```js
export default {
server: {
open: '/docs/index.html'
}
}
```
*/
open: true,
// 本地服務代理
// 類型: Record<string, string | ProxyOptions>
// 為開發服務器配置自定義代理規則。期望接收一個 { key: options } 對象。如果 key 值以 ^ 開頭，將會被解釋為 RegExp。
/*
使用`http-proxy`，完整選項詳見https://github.com/http-party/node-http-proxy#options
@example
```js
export default {
server: {
proxy: {
// 字符串簡寫寫法
'/foo': 'http://localhost:4567/foo',
// 選項寫法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 正則表達式寫法
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, '')
}
}
}
}
```
*/
proxy: {},
// 類型: boolean | CorsOptions
// 為開發服務器配置 CORS。默認啟用并允許任何源，傳遞一個 選項對象 來調整行為或設為 false 表示禁用。
cors: true,
// 類型: boolean
// 相關內容: https://cn.vitejs.dev/guide/dep-pre-bundling.html
// 設置為`true`強制使依賴預構建
force: false,
// 類型: boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean }
// 禁用或配置HMR鏈接（用于HMR websocket 必須使用不同的http服務器地址的情況）
// 設置`server.hmr.overlay`為`false`可以禁用服務器錯誤遮罩層
hmr: true,
// 類型: object
// 傳遞給`chokidar`的文件系統監視器選項
// https://github.com/paulmillr/chokidar#api
watch: {},
},
// 構建的配置
build: {
// 類型: string
// 默認: modules
// 相關內容：https://cn.vitejs.dev/guide/build.html#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7
// 選項: https://esbuild.github.io/api/#target
/*
設置最終構建的瀏覽器兼容目標。默認值是一個 Vite 特有的值，'modules'，這是指 支持原生 ES 模塊的瀏覽器。
另一個特殊值是 “esnext” —— 即指執行 minify 轉換（作最小化壓縮）并假設有原生動態導入支持。
轉換過程將會由 esbuild 執行，并且此值應該是一個合法的 esbuild 目標選項。自定義目標也可以是一個 ES 版本（例如：es2015）、一個瀏覽器版本（例如：chrome58）或是多個目標組成的一個數組。
注意，如果代碼包含不能被 esbuild 安全地編譯的特性，那么構建將會失敗。查看 esbuild 文檔 獲取更多細節。
*/
target: 'modules',
// 類型: string
// 默認: dist
// 指定輸出路徑（相對于項目根目錄）
outDir: 'dist',
// 類型: string
// 默認: assets
// 指定生成靜態資源的存放路徑（相對于build.outDir）
assetsDir: 'assets',
// 類型: number
// 默認: 4096（4kb）
// 小于此閾值的導入或引用資源將內聯為 base64 編碼，以避免額外的 http 請求。設置為 0 可以完全禁用此項。
assetsInlineLimit: 4096,
// 類型: boolean
// 默認: true
// 啟用/禁用 CSS 代碼拆分。當啟用時，在異步 chunk 中導入的 CSS 將內聯到異步 chunk 本身，并在塊加載時插入。
// 如果禁用，整個項目中的所有 CSS 將被提取到一個 CSS 文件中。
cssCodeSplit: true,
// 類型: boolean
// 默認: false
// 構建后是否生成sourceMap文件
sourcemap: false,
// 類型: RollupOptions
// https://rollupjs.org/guide/en/#big-list-of-options
// 自定義底層的 Rollup 打包配置。這與從 Rollup 配置文件導出的選項相同，并將與 Vite 的內部 Rollup 選項合并。查看 Rollup 選項文檔 獲取更多細節。
// https://rollupjs.org/guide/en/#big-list-of-options
rollupOptions: {},
// 類型: RollupCommonJSOptions
// https://github.com/rollup/plugins/tree/master/packages/commonjs#options
// 傳遞給 @rollup/plugin-commonjs 插件的選項。
// https://github.com/rollup/plugins/tree/master/packages/commonjs
commonjsOptions: {},
// 類型: { entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[] }
// 相關內容: https://cn.vitejs.dev/guide/build.html#%E5%BA%93%E6%A8%A1%E5%BC%8F
//* 構建為庫。entry 是必須的因為庫不可以使用 HTML 作為入口。name 則是暴露的全局變量，并且在 formats 包含 'umd' 或 'iife' 時是必須的。默認 formats 是 ['es', 'umd']。
lib: {
entry: '',
},
// 類型: boolean
// 默認: false
// 相關內容: https://cn.vitejs.dev/guide/backend-integration.html
// 當設置為 true，構建后將會生成 manifest.json 文件，映射沒有被 hash 的資源文件名和它們的 hash 版本。可以為一些服務器框架渲染時提供正確的資源引入鏈接。
manifest: false,
// 類型: boolean | 'terser' | 'esbuild'
// 默認: 'terser'
// 設置為 false 可以禁用最小化混淆，或是用來指定使用哪種混淆器。默認為 Terser，雖然 Terser 相對較慢，但大多數情況下構建后的文件體積更小。ESbuild 最小化混淆更快但構建后的文件相對更大。
// https://github.com/terser/terser
minify: 'terser',
// 類型: TerserOptions
// 傳遞給Terser的更多minify選項
// https://terser.org/docs/api-reference#minify-options
terserOptions: {},
// 類型: boolean
// 默認: true
// 設置為 false 來禁用將構建后的文件寫入磁盤。這常用于 編程式地調用 build() 在寫入磁盤之前，需要對構建后的文件進行進一步處理。
// https://cn.vitejs.dev/guide/api-javascript.html#build
write: true,
// 類型: boolean
// 默認: 若outDir在root目錄下，則為true
// 默認情況下，若 outDir 在 root 目錄下，則 Vite 會在構建時清空該目錄。若 outDir 在根目錄之外則會拋出一個警告避免意外刪除掉重要的文件。可以設置該選項來關閉這個警告。該功能也可以通過命令行參數 --emptyOutDir 來使用。
emptyOutDir: true,
// 類型: boolean
// 默認: true
// 啟用/禁用 brotli 壓縮大小報告。壓縮大型輸出文件可能會很慢，因此禁用該功能可能會提高大型項目的構建性能。
brotliSize: true,
// 類型: number
// 默認: 500
// chunk大小警告的限制，以kbs為單位
chunkSizeWarningLimit: 500,
},
// 依賴優化
optimizeDeps: {
// 入口
// 類型: string | string[]
// 默認情況下，Vite 會抓取你的 index.html 來檢測需要預構建的依賴項。如果指定了 `build.rollupOptions.input`，Vite 將轉而去抓取這些入口點。
// 如果這兩者都不適合你的需要，則可以使用此選項指定自定義條目 - 該值需要遵循 fast-glob 模式 ，或者是相對于 vite 項目根的模式數組。這將覆蓋掉默認條目推斷。
// https://github.com/mrmlnc/fast-glob#basic-syntax
entries: '',
// 類型: string[]
// 在預構建中強制排除的依賴項
exclude: [],
// 類型: string[]
// 默認情況下，不在 node_modules 中的，鏈接的包不會被預構建。使用此選項可強制預構建鏈接的包。
include: [],
},
})
````
