為開發提供極速響應v4.1.0
目前Vite已經更新到v4.1.0的版本了
vite的特性
- 極速的服務啟動，意思就是一個字快
- ⚡️輕量快速的熱重載，就是說熱更新也很快
- 豐富的功能，支援的工具集比較多，開箱即用
- 優化的建構 對于生産環境的建構有更好的優化
- 通用的插件，在開發和建構之間共享 Rollup-superset 插件接口。
- 完全類型化的API 使用TS，有較好的文法提示和類型支援
使用Vite建立項目
使用npm
npm create vite@latest
使用yarn
yarn create vite
使用pnpm
pnpm create vite
如果使用vite建立Vue項目的話，可以建立帶模版的vue項目
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app --template vue
檢視 create-vite 以擷取每個模闆的更多細節：vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。
區分開發環境，測試環境和生産環境
首先在項目根目錄下建立.env檔案,Vite 使用 dotenv 從你的 環境目錄 中的下列檔案加載額外的環境變量
.env # 所有情況下都會加載
.env.local # 所有情況下都會加載，但會被 git 忽略
.env.[mode] # 隻在指定模式下加載
.env.[mode].local # 隻在指定模式下加載，但會被 git 忽略
.env.development # 開發模式
.env.production # 生産模式
.env.test # 測試模式
預設情況下
- npm run dev 會加載 .env 和 .env.development 内的配置
- npm run build 會加載 .env 和 .env.production 内的配置
- mode 可以通過指令行 --mode 選項來重寫。
在package.json檔案中配置一個test指令
環境加載優先級
一份用于指定模式的檔案（例如 .env.production）會比通用形式的優先級更高（例如 .env）。
另外，Vite 執行時已經存在的環境變量有最高的優先級，不會被 .env 類檔案覆寫。例如當運作 VITE_SOME_KEY=123 vite build 的時候。
.env 類檔案會在 Vite 啟動一開始時被加載，而改動會在重新開機伺服器後生效
console.log('擷取目前目錄',process.cwd());
//參數：模式：development||production,入口檔案，修改.env變量字首
const env=loadEnv('development',process.cwd(),'wmq')
console.log(env);
加載的環境變量也會通過 import.meta.env 以字元串形式暴露給用戶端源碼。
為了防止意外地将一些環境變量洩漏到用戶端，隻有以 VITE_ 為字首的變量才會暴露給經過 vite 處理的代碼
是以這裡如果沒配置字首的話，import.meta.env 就通路不到了
VITE_BASE_API=base/api 這個可以被通路到
wmq_client='aa'。通路不了
使用envPrefix方法可以更換環境變量的字首
然後在main.js檔案中去列印import.mate.env的環境變量，在不同的開發模式下就可以擷取到相應的環境變量了
開發模式下
生産模式下
測試模式下
通過驗證我們可以看出，不管是什麼模式下，都可以加載到.env檔案中的變量
更改.env的預設位址
我們現在的.env檔案都是建立在根目錄的，如果.env.XX的檔案太多，會顯得我們的項目目錄很亂，我們能将.env放在一個統一的檔案夾内嗎？
可以通過envDir配置來改變！參考：共享配置 | Vite 官方中文文檔
envDir用于加載 .env 檔案的目錄。可以是一個絕對路徑，也可以是相對于項目根的路徑。
- 類型： string
- 預設： root
比如，我們在vite.config.js中這樣配置
import { defineConfig } from "vite";
export default defineConfig( {
envDir:"env"
});
然後，所有的.env.xxx檔案就可以放在項目根目錄的env檔案夾下了。
配置服務端選項
export default defineConfig({
server: {
host: 'localhost',// 開放伺服器啟動的位址，預設時localhost
port: 9000,//項目啟動端口
open: true,//項目啟動時是否打開浏覽器
base:'/',//用于代理 Vite 作為子檔案夾時使用。
cors: true,//為開發伺服器配置 CORS。預設啟用并允許任何源，傳遞一個 選項對象 來調整行為或設為 false 表示禁用。
headers:{},//指定服務端響應的headers資訊
strictPort:true,//設為 true 時若端口已被占用則會直接退出，而不是嘗試下一個可用端口。
proxy: {//配置後端代理
// 字元串簡寫寫法
'/foo': 'http://localhost:4567',
// 選項寫法
'/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 執行個體
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的執行個體
}
},
// Proxying websockets or socket.io
'/socket.io': {
target: 'ws://localhost:3000',
ws: true
}
}，
}
})
server
其中server是比較常用的重要屬性，特别是proxy主要是配置代理後端API位址的
- target
- changeOrigin
- rewrite
服務端的選項常用的大概就這些了，期中最常用的就是解決開發過程中的跨域問題了，需要在proxy裡面去設定即可，其他的不常用的選項如有用到去查vite官網的伺服器選項
配置CSS
export default defineConfig({
//css配置
css: {
// 開發模式為true，生産模式為flase, devSourcemap:true,//源代碼映射
devSourcemap:command === 'serve',
// css子產品化配置項
modules:{
// 是否開啟子產品化。子產品化or全局化
scopeBehaviour: 'global' | 'local',
// css子產品化的路徑
globalModulePaths: RegExp[],
// 更改生成的哈希名稱，一個字元串模闆或者通過函數傳回
generateScopedName: string| ((name, filename, css) => string),
// 生成hash名稱的字首
hashPrefix: string,
// 修改生成的配置對象的key的展示形式(駝峰還是中劃線形式)
localsConvention:'camelCase'
| 'camelCaseOnly'
| 'dashes'
| 'dashesOnly'
| null
},
// 預處理器配置項
preprocessorOptions: {
less: {
math: "always",
},
scss: {
additionalData: '@import "src/assets/styles/var.scss";'
}
},
postcss:{
// 一些配置
}
}
})
css的配置主要是一些css的子產品化和預處理器的配置。比如scss，less，postcss等等
子產品化屬性
- scopeBehaviour：是否開啟子產品化，global為全局化，local為子產品化
- globalModulePaths：css子產品化的路徑
- generateScopedName：生成的哈希名稱，一個字元串模闆或者通過函數傳回
- hashPrefix：生成hash名稱的字首
- localsConvention：生成的配置對象的key的展示形式(駝峰還是中劃線形式)
其他的less，scss，postcss屬性使用的時候查詢官方文檔即可
其他的一些常用小配置
配置别名
export default defineConfig({
resolve:{
alias:{
'@': resolve(__dirname, 'src')//配置别名
}
}
})
打包速度的問題
vite在打包中會計算包的大小，但是隻是計算不做處理，會長打包時間，是以可以在build中再添加一個配置項關閉打包計算。
啟用/禁用 gzip 壓縮大小報告。壓縮大型輸出檔案可能會很慢，是以禁用該功能可能會提高大型項目的建構性能。
brotliSize: false,//vite2
reportCompressedSize:false //vite3
gizp壓縮
plugins: [vue(),
viteCompression({
//生成壓縮包gz
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),],
我把打包後的項目用express稍微搭了個背景跑了一下，發現express開啟了gzip和沒開啟gzip，都是一樣的。不知道vite是不是預設啟動gzip壓縮？有了解的小夥伴也可以說一下。
生産環境移除console
build:{
...
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
以上就是vite的一些常用的項目配置了，基本上絕大多數都是在項目中需要經常使用的，而且随着前端技術的不斷發展，建構工具也是在不停的更新疊代，作為技術人員也得緊跟技術潮流，也許你現在的項目用的不是vite，但是你不能說你不會，所謂技多不壓身嘛，小夥伴們趕緊學起來吧！