Vite（/vit/）和老的模塊化工具（Webpack丈秩、Gulp等）區(qū)別主要在于如迟，本地運行時直接執(zhí)行源文件并用瀏覽器的ES模塊處理代碼蓖柔，省去了編譯過程，因此本地運行闸昨、熱更新時速度更快蚯斯。
- 目前支持 Vue3 和 React
- 僅支持 ES Module，不支持 CommonJS饵较。
兼容不支持ESM的老瀏覽器：
npm i @vitejs/plugin-legacy -D
# vite.config.js
import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig( {
plugins: [
legacyPlugin({
targets:['chrome 52'], // 需要兼容的目標列表拍嵌，可以設置多個
additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11時需要此插件
})
]
})
- 正式發(fā)布時因考慮ESM兼容性問題以及更好的網(wǎng)絡效率，仍然需要打包循诉，和 webpack 區(qū)別不大撰茎，可在
vite.config.ts文件中配置啟動和打包的額外參數(shù)：
import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => ({
server: {
host: "127.0.0.1",
port: 8014
},
build: {
minify: "terser",
terserOptions: {
compress: {
pure_funcs: ['console.log', 'console.warn'],
// drop_console: command === "build" && loadEnv(mode, __dirname).VITE_API_ENV === "prod",
// drop_debugger: command === "build" && loadEnv(mode, __dirname).VITE_API_ENV === "prod"
}
}
},
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
}));
- Vite構(gòu)建的項目里沒有
process.env，可通過import.meta.env引用根目錄下.env開頭文件中以VITE_開頭的內(nèi)容打洼，如：
.env # 所有情況下都會加載
.env.local # 所有情況下都會加載龄糊，但會被 git 忽略
.env.[mode] # 只在指定模式下加載
.env.[mode].local # 只在指定模式下加載，但會被 git 忽略
# .env.development
BASE_URL='/api'
此外 import.meta.env 中有幾個固定值：
- MODE: {string} 應用運行的模式（"development" 或 "production"）募疮。
- BASE_URL: {string} 部署應用時的基本 URL炫惩。他由vite.config中的base配置項或build指令中的--build決定。
- PROD: {boolean} 應用是否運行在生產(chǎn)環(huán)境阿浓。
- DEV: {boolean} 應用是否運行在開發(fā)環(huán)境 (永遠與PROD相反)他嚷。
