為開發提供極速響應v4.1.0
目前Vite已經更新到v4.1.0的版本了
vite的特性
- ??極速的服務啟動，意思就是一個字快
- ??輕量快速的熱重載，就是說熱更新也很快
- ??豐富的功能，支持的工具集比較多，開箱即用
- ??優化的構建 對于生產環境的構建有更好的優化
- ??通用的插件，在開發和構建之間共享 Rollup-superset 插件接口。
- 完全類型化的API 使用TS，有較好的語法提示和類型支持
使用Vite創建項目
使用npm
<pre data-language="go" id="lYMaM" class="ne-codeblock language-go" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">npm create vite@latest</pre>
使用yarn
<pre data-language="bash" id="p4WJ8" class="ne-codeblock language-bash" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">yarn create vite</pre>
使用pnpm
<pre data-language="bash" id="APdU4" class="ne-codeblock language-bash" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">pnpm create vite</pre>
如果使用vite創建Vue項目的話，可以創建帶模版的vue項目
<pre data-language="bash" id="bI5QC" class="ne-codeblock language-bash" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959"># 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</pre>
查看 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 從你的 環境目錄 中的下列文件加載額外的環境變量
<pre data-language="javascript" id="K85Vx" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">.env # 所有情況下都會加載
.env.local # 所有情況下都會加載，但會被 git 忽略
.env.[mode] # 只在指定模式下加載
.env.[mode].local # 只在指定模式下加載，但會被 git 忽略
.env.development # 開發模式
.env.production # 生產模式
.env.test # 測試模式
</pre>
默認情況下
- 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 啟動一開始時被加載，而改動會在重啟服務器后生效
<pre data-language="javascript" id="TEjAO" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">console.log('獲取當前目錄',process.cwd());
//參數：模式：development||production,入口文件，修改.env變量前綴
const env=loadEnv('development',process.cwd(),'wmq')
console.log(env);</pre>
加載的環境變量也會通過 import.meta.env 以字符串形式暴露給客戶端源碼。
為了防止意外地將一些環境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會暴露給經過 vite 處理的代碼
所以這里如果沒配置前綴的話，import.meta.env 就訪問不到了
<pre data-language="javascript" id="oDI0e" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">VITE_BASE_API=base/api 這個可以被訪問到
wmq_client='aa??'。訪問不了</pre>
然后在main.js文件中去打印import.mate.env的環境變量，在不同的開發模式下就可以獲取到相應的環境變量了
開發模式下
生產模式下
測試模式下
通過驗證我們可以看出，不管是什么模式下，都可以加載到.env文件中的變量
更改.env的默認地址
我們現在的.env文件都是建立在根目錄的，如果.env.XX的文件太多，會顯得我們的項目目錄很亂，我們能將.env放在一個統一的文件夾內嗎？
可以通過envDir配置來改變！參考：共享配置 | Vite 官方中文文檔
envDir用于加載 .env 文件的目錄?？梢允且粋€絕對路徑，也可以是相對于項目根的路徑。
- 類型： string
- 默認： root
比如，我們在vite.config.js中這樣配置
<pre data-language="javascript" id="Ks4H2" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">import { defineConfig } from "vite";
export default defineConfig( {
envDir:"env"
});</pre>
然后，所有的.env.xxx文件就可以放在項目根目錄的env文件夾下了。
配置服務端選項
<pre data-language="javascript" id="DW1to" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">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
}
}，
}
})
</pre>
server
其中server是比較常用的重要屬性，特別是proxy主要是配置代理后端API地址的
- target
- changeOrigin
- rewrite
服務端的選項常用的大概就這些了，期中最常用的就是解決開發過程中的跨域問題了，需要在proxy里面去設置即可，其他的不常用的選項如有用到去查vite官網的[**服務器選項**](https://vitejs.cn/vite3-cn/config/server-options.html)
配置CSS
<pre data-language="javascript" id="MMetb" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">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:{
// 一些配置
}
}
})</pre>
css的配置主要是一些css的模塊化和預處理器的配置。比如scss，less，postcss等等
模塊化屬性
- scopeBehaviour：是否開啟模塊化，global為全局化，local為模塊化
- globalModulePaths：css模塊化的路徑
- generateScopedName：生成的哈希名稱，一個字符串模板或者通過函數返回
- hashPrefix：生成hash名稱的前綴
- localsConvention：生成的配置對象的key的展示形式(駝峰還是中劃線形式)
其他的less，scss，postcss屬性使用的時候查詢官方文檔即可
其他的一些常用小配置
配置別名
<pre data-language="javascript" id="P0Efc" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">export default defineConfig({
resolve:{
alias:{
'@': resolve(__dirname, 'src')//配置別名
}
}
})</pre>
打包速度的問題
vite在打包中會計算包的大小，但是只是計算不做處理，會長打包時間，所以可以在build中再添加一個配置項關閉打包計算。
啟用/禁用 gzip 壓縮大小報告。壓縮大型輸出文件可能會很慢，因此禁用該功能可能會提高大型項目的構建性能。
<pre data-language="c" id="Oxztu" class="ne-codeblock language-c" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">brotliSize: false,//vite2
reportCompressedSize:false //vite3</pre>
gizp壓縮
<pre data-language="javascript" id="aVOQC" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">plugins: [vue(),
viteCompression({
//生成壓縮包gz
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),],</pre>
我把打包后的項目用express稍微搭了個后臺跑了一下，發現express開啟了gzip和沒開啟gzip，都是一樣的。不知道vite是不是默認啟動gzip壓縮？有了解的小伙伴也可以說一下。
生產環境移除console
<pre data-language="javascript" id="mUOLt" class="ne-codeblock language-javascript" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">build:{
...
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}</pre>
以上就是vite的一些常用的項目配置了，基本上絕大多數都是在項目中需要經常使用的，而且隨著前端技術的不斷發展，構建工具也是在不停的更新迭代，作為技術人員也得緊跟技術潮流，也許你現在的項目用的不是vite，但是你不能說你不會，所謂技多不壓身嘛，小伙伴們趕緊學起來吧！??
