為開發(fā)提供極速響應(yīng)v4.1.0

目前Vite已經(jīng)更新到v4.1.0的版本了

vite的特性

• ??極速的服務(wù)啟動(dòng)，意思就是一個(gè)字快

• ??輕量快速的熱重載，就是說熱更新也很快

• ??豐富的功能，支持的工具集比較多，開箱即用

• ??優(yōu)化的構(gòu)建 對于生產(chǎn)環(huán)境的構(gòu)建有更好的優(yōu)化

• ??通用的插件，在開發(fā)和構(gòu)建之間共享 Rollup-superset 插件接口。

• 完全類型化的API 使用TS，有較好的語法提示和類型支持

使用Vite創(chuàng)建項(xiàng)目

使用npm

npm create vite@latest

使用yarn

yarn create vite

使用pnpm

pnpm create vite

如果使用vite創(chuàng)建Vue項(xiàng)目的話，可以創(chuàng)建帶模版的vue項(xiàng)目

# 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 以獲取每個(gè)模板的更多細(xì)節(jié)：vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

區(qū)分開發(fā)環(huán)境，測試環(huán)境和生產(chǎn)環(huán)境

首先在項(xiàng)目根目錄下創(chuàng)建.env文件,Vite 使用 dotenv 從你的 環(huán)境目錄 中的下列文件加載額外的環(huán)境變量

.env ? ? ? ? ? ? ? ?# 所有情況下都會(huì)加載 .env.local ? ? ? ? ?# 所有情況下都會(huì)加載，但會(huì)被 git 忽略 .env.[mode] ? ? ? ? # 只在指定模式下加載 .env.[mode].local ? # 只在指定模式下加載，但會(huì)被 git 忽略 .env.development # 開發(fā)模式 .env.production # 生產(chǎn)模式 .env.test # 測試模式

默認(rèn)情況下

• npm run dev 會(huì)加載 .env 和 .env.development 內(nèi)的配置

• npm run build 會(huì)加載 .env 和 .env.production 內(nèi)的配置

• mode 可以通過命令行 --mode 選項(xiàng)來重寫。

在package.json文件中配置一個(gè)test命令

環(huán)境加載優(yōu)先級(jí)

一份用于指定模式的文件（例如 .env.production）會(huì)比通用形式的優(yōu)先級(jí)更高（例如 .env）。

另外，Vite 執(zhí)行時(shí)已經(jīng)存在的環(huán)境變量有最高的優(yōu)先級(jí)，不會(huì)被 .env 類文件覆蓋。例如當(dāng)運(yùn)行 VITE_SOME_KEY=123 vite build 的時(shí)候。

.env 類文件會(huì)在 Vite 啟動(dòng)一開始時(shí)被加載，而改動(dòng)會(huì)在重啟服務(wù)器后生效

console.log('獲取當(dāng)前目錄',process.cwd()); //參數(shù)：模式：development||production,入口文件，修改.env變量前綴 const env=loadEnv('development',process.cwd(),'wmq') console.log(env);

加載的環(huán)境變量也會(huì)通過 import.meta.env 以字符串形式暴露給客戶端源碼。

為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過 vite 處理的代碼

所以這里如果沒配置前綴的話，import.meta.env 就訪問不到了

VITE_BASE_API=base/api 這個(gè)可以被訪問到 wmq_client='aa??'。訪問不了

使用envPrefix方法可以更換環(huán)境變量的前綴

然后在main.js文件中去打印import.mate.env的環(huán)境變量，在不同的開發(fā)模式下就可以獲取到相應(yīng)的環(huán)境變量了

開發(fā)模式下

生產(chǎn)模式下

測試模式下

通過驗(yàn)證我們可以看出，不管是什么模式下，都可以加載到.env文件中的變量

更改.env的默認(rèn)地址

我們現(xiàn)在的.env文件都是建立在根目錄的，如果.env.XX的文件太多，會(huì)顯得我們的項(xiàng)目目錄很亂，我們能將.env放在一個(gè)統(tǒng)一的文件夾內(nèi)嗎？

可以通過envDir配置來改變！參考：共享配置 | Vite 官方中文文檔

envDir用于加載 .env 文件的目錄?？梢允且粋€(gè)絕對路徑，也可以是相對于項(xiàng)目根的路徑。

• 類型： string

• 默認(rèn)： root

比如，我們在vite.config.js中這樣配置

import { defineConfig } from "vite"; export default defineConfig( { ?envDir:"env" });

然后，所有的.env.xxx文件就可以放在項(xiàng)目根目錄的env文件夾下了。

配置服務(wù)端選項(xiàng)

export default defineConfig({ ?server: { ? ?host: 'localhost',// ?開放服務(wù)器啟動(dòng)的地址，默認(rèn)時(shí)localhost ? ?port: 9000,//項(xiàng)目啟動(dòng)端口 ? ?open: true,//項(xiàng)目啟動(dòng)時(shí)是否打開瀏覽器 ? ?base:'/',//用于代理 Vite 作為子文件夾時(shí)使用。 ? ?cors: true,//為開發(fā)服務(wù)器配置 CORS。默認(rèn)啟用并允許任何源，傳遞一個(gè) 選項(xiàng)對象 來調(diào)整行為或設(shè)為 false 表示禁用。 ? ?headers:{},//指定服務(wù)端響應(yīng)的headers信息 ? ?strictPort:true,//設(shè)為 true 時(shí)若端口已被占用則會(huì)直接退出，而不是嘗試下一個(gè)可用端口。 ? ?proxy: {//配置后端代理 ? ? ?// 字符串簡寫寫法 ? ? ?'/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í)例 ? ? ? ?} ? ? ?}, ? ? ?// Proxying websockets or socket.io ? ? ?'/socket.io': { ? ? ? ?target: 'ws://localhost:3000', ? ? ? ?ws: true ? ? ?} ? ?}， ?} })

server

其中server是比較常用的重要屬性，特別是proxy主要是配置代理后端API地址的

• target

• changeOrigin

• rewrite

服務(wù)端的選項(xiàng)常用的大概就這些了，期中最常用的就是解決開發(fā)過程中的跨域問題了，需要在proxy里面去設(shè)置即可，其他的不常用的選項(xiàng)如有用到去查vite官網(wǎng)的服務(wù)器選項(xiàng)

配置CSS

export default defineConfig({ ?//css配置 ?css: { ? ?// 開發(fā)模式為true，生產(chǎn)模式為flase, devSourcemap:true,//源代碼映射 ? ?devSourcemap:command === 'serve', ? ?// css模塊化配置項(xiàng) ? ?modules:{ ? ? ?// 是否開啟模塊化。模塊化or全局化 ? ? ?scopeBehaviour: 'global' | 'local', ? ? ?// css模塊化的路徑 ? ? ?globalModulePaths: RegExp[], ? ? ?// 更改生成的哈希名稱，一個(gè)字符串模板或者通過函數(shù)返回 ? ? ?generateScopedName: string| ((name, filename, css) => string), ? ? ?// 生成hash名稱的前綴 ? ? ?hashPrefix: string, ? ? ?// 修改生成的配置對象的key的展示形式(駝峰還是中劃線形式) ? ? ?localsConvention:'camelCase' ? ? ? ?| 'camelCaseOnly' ? ? ? ?| 'dashes' ? ? ? ?| 'dashesOnly' ? ? ? ?| null ? ?}, ? ?// 預(yù)處理器配置項(xiàng) ? ?preprocessorOptions: { ? ? ?less: { ? ? ? ?math: "always", ? ? ?}, ? ? ?scss: { ? ? ? ?additionalData: '@import "src/assets/styles/var.scss";' ? ? ?} ? ?}, ? ? ? ?postcss:{ ? ? ?// 一些配置 ? ?} ?} })

css的配置主要是一些css的模塊化和預(yù)處理器的配置。比如scss，less，postcss等等

模塊化屬性

• scopeBehaviour：是否開啟模塊化，global為全局化，local為模塊化

• globalModulePaths：css模塊化的路徑

• generateScopedName：生成的哈希名稱，一個(gè)字符串模板或者通過函數(shù)返回

• hashPrefix：生成hash名稱的前綴

• localsConvention：生成的配置對象的key的展示形式(駝峰還是中劃線形式)

其他的less，scss，postcss屬性使用的時(shí)候查詢官方文檔即可

其他的一些常用小配置

配置別名

export default defineConfig({ ?resolve:{ ? ? ? ?alias:{ ? ? ? ? ? ?'@': resolve(__dirname, 'src')//配置別名 ? ? ? ?} ? ?} })

打包速度的問題

vite在打包中會(huì)計(jì)算包的大小，但是只是計(jì)算不做處理，會(huì)長打包時(shí)間，所以可以在build中再添加一個(gè)配置項(xiàng)關(guān)閉打包計(jì)算。

啟用/禁用 gzip 壓縮大小報(bào)告。壓縮大型輸出文件可能會(huì)很慢，因此禁用該功能可能會(huì)提高大型項(xiàng)目的構(gòu)建性能。

brotliSize: false,//vite2 reportCompressedSize:false //vite3

gizp壓縮

plugins: [vue(), ? ? ?viteCompression({ ? ? ? ?//生成壓縮包gz ? ? ? ?verbose: true, ? ? ? ?disable: false, ? ? ? ?threshold: 10240, ? ? ? ?algorithm: 'gzip', ? ? ? ?ext: '.gz', ? ?}),],

我把打包后的項(xiàng)目用express稍微搭了個(gè)后臺(tái)跑了一下，發(fā)現(xiàn)express開啟了gzip和沒開啟gzip，都是一樣的。不知道vite是不是默認(rèn)啟動(dòng)gzip壓縮？有了解的小伙伴也可以說一下。

生產(chǎn)環(huán)境移除console

build:{ ?... ?terserOptions: { ? ? ?compress: { ? ? ? ?drop_console: true, ? ? ? ?drop_debugger: true ? ? ?} ?} }

以上就是vite的一些常用的項(xiàng)目配置了，基本上絕大多數(shù)都是在項(xiàng)目中需要經(jīng)常使用的，而且隨著前端技術(shù)的不斷發(fā)展，構(gòu)建工具也是在不停的更新迭代，作為技術(shù)人員也得緊跟技術(shù)潮流，也許你現(xiàn)在的項(xiàng)目用的不是vite，但是你不能說你不會(huì)，所謂技多不壓身嘛，小伙伴們趕緊學(xué)起來吧！??