介紹
vite 作為新一代開發(fā)鳖谈、打包工具出現(xiàn)，速度比webpack快了10倍不止阔涉，于大型項目來說缆娃，是一個不可忽視的效率優(yōu)化方式。
其速度優(yōu)勢的形成瑰排，主要基于兩方面贯要，
1:采用go語言開發(fā)的esbuild預加載工具。
2:新一代瀏覽器原生支持的esmodule模塊管理接管打包工作椭住，代替js崇渗。
其解決了資源加載時產生大量的http資源請求，以及簡化了冗長的打包過程。
實踐
構建項目
使用npm：npm init vite@latest
或者yarn：yarn create vite
以及pmpm：pnpm create vite
針對 vite+vue項目
# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要額外的雙橫線：
npm init 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
主要目錄結構
基本依賴
其中 @types/node 提供TS版本的node支持宅广，在TS語言環(huán)境下使用如path葫掉、process等模塊工具。
vite配置
因它使用 Rollup 打包代碼乘碑，并且是預配置的，可輸出用于生產環(huán)境的高度優(yōu)化過的靜態(tài)資源金拒。
所以配置項相比較webpack會更加簡潔兽肤！
注：在vite.config.js中無法使用process.env與import.meta.env.*
所以使用環(huán)境變量的方法需要用到 vite 全局方法 loadEnv(mode,變量名)
啟動
vite內部已經(jīng)集成了dotenv，所以我們可以輕易的配置绪抛、更換環(huán)境變量资铡。
比如我們可以在根目錄創(chuàng)建以下文件
其命名為 .env.* 的格式，文件后綴對應開發(fā)模式
我們可以在運行不同命令式時指定當前模式幢码，比如
"scripts": {
"dev": "vite --mode dev", // 運行時
"build:prod": "vite build --mode prod", // 打包
},
使用 --mode * 命令來選用指定的全局配置文件
當我們運行了 npm run dev
此時可以使用vite提供的 import.meta.env.MODE 來查看當前的mode
console.log(import.meta.env.MODE) // 控制臺輸出 dev
注：vite提供 import.meta.env.* 來訪問環(huán)境變量笤休，其變量必須以 VITE_ 開頭，否則不會暴露出去症副。
import.meta.env.PROD 與 import.meta.env.DEV 為vite提供的值店雅，且他們應當始終相反
打包
// package.json
"scripts": {
......
"build": "vite build --mode dev", // 本地
"build:stag": "vite build --mode stag", // 預發(fā)布
"build:prod": "vite build --mode prod", // 生產
......
},
// vite.config.js
export default defineConfig({
......
// 訪問線上資源的路徑≌晗常可以是完整的如https://www.baidu.com/source/
// 也可以是不需要域名的路徑闹啦，如下
base: "/neoclub/uta/",
......
});
值得注意的是，你使用js生成route配置辕坝，卻在build后出現(xiàn)了無法讀取module的錯誤窍奋，比如以下寫法
const children = []
for (const menu of menus) {
const item = {
path: menu.path,
name: menu.path.replace("/", "_"),
component: () => import(`@/views${menu.path}.vue`), // 將無法正確引用模塊
};
children.push(item)
}
export const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: "/home",
name: "_home",
component: () => import("@/views/home.vue"),
children
}
]
});
出現(xiàn)錯誤
解決方法
Vite 支持使用特殊的 import.meta.glob 函數(shù)從文件系統(tǒng)導入多個模塊
匹配到的文件默認是懶加載的，通過動態(tài)導入實現(xiàn)酱畅，并會在構建時分離為獨立的 chunk
+ const componentPath = import.meta.glob("../views/*.vue");
const children = []
for (const menu of menus) {
const item = {
path: menu.path,
name: menu.path.replace("/", "_"),
- component: () => import(`@/views${menu.path}.vue`), // 將無法正確引用模塊
+ component: componentPath[`@/views${menu.path}.vue`], // 可以正確引入
};
children.push(item)
}
export const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: "/home",
name: "_home",
component: () => import("@/views/home.vue"),
children
}
]
});
