【實戰(zhàn)】1377- 如何從 Vue CLI 遷移到 Vite
?譯自：https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/
如果你在 2021 年之前使用 Vue 進行開發(fā)，那么你選擇的構(gòu)建工具很有可能是Vue CLI。很長時間以來，它一直是 Vue.js 項目腳手架的標(biāo)準(zhǔn)實踐。不過現(xiàn)在，尤大的下一代構(gòu)建工具 Vite 已經(jīng)吸引了很多關(guān)注，它是Vue CLI 的一個很好的替代品。
為什么要從 Vue CLI 遷移到 Vite？
主要原因是速度。Vite的開發(fā)服務(wù)器速度很快。因為它對JavaScript模塊使用原生瀏覽器支持，所以服務(wù)器的啟動時間是即時的。同時這還意味著，無論程序大小如何，熱模塊更新都會很快，因為不必重建整個bundle。為了演示，下面一個使用Vue Cli和Vite創(chuàng)建完全相同的項目進行比較：
啟動時間：
Vue CLI-2591毫秒（超過2秒） Vite-259ms（遠(yuǎn)低于半秒-快10倍）??
熱更新（HMR）：
Vue CLI-171ms Vite-基本上是即時的 記住，這只是一個搭建的簡單示例。隨著項目的增長，Vue CLI版本的速度會逐漸變慢，而Vite卻承諾無論項目大小，都能在相同的級別速度上運行。
如何從Vue CLI遷移到Vite
為了解決這個問題，本文使用Vue CLI構(gòu)建了一個全新的項目，將與您一起完成將其轉(zhuǎn)換為Vite的步驟。當(dāng)然，實際工作中通常不會從一個全新的Vue CLI項目開始，但很多步驟是通用的。此外，本文選擇Vue2作為演示，因為大多數(shù)人可能仍然在使用Vue 2。同時，本文也指出了Vue 3的不同之處（它比vue2遷移更簡單）。
第1步：更新依賴項
遷移到Vite的第一步是更新package.json中的依賴項。我們需要刪除與Vue CLI相關(guān)的依賴項。
// package.json
"@vue/cli-plugin-babel": "~4.5.0", // remove
"@vue/cli-plugin-eslint": "~4.5.0", // remove
"@vue/cli-plugin-router": "~4.5.0", // remove
"@vue/cli-plugin-vuex": "~4.5.0", // remove
"@vue/cli-service": "~4.5.0", // remove
我們還可以刪除sass-loader，因為Vite內(nèi)置支持常見的預(yù)處理器。我們也可以繼續(xù)使用自己選擇的CSS預(yù)處理器。但請注意，Vite建議將原生CSS變量與PostCSS插件一起使用，編寫簡單、符合未來標(biāo)準(zhǔn)的CSS。
// package.json
"sass-loader": "^8.0.2" // remove
最后，添加Vite作為依賴項，以及Vite的Vue插件組件，以支持單文件組件。
// package.json
"@vitejs/plugin-vue": "^1.6.1",
"vite": "^2.5.4",
此外，因為我們正在遷移Vue 2項目，我們還需要添加社區(qū)為Vue 2開發(fā)的Vite插件。如果我們使用Vue 3，就沒有必要這樣做。
// package.json
"vite-plugin-vue2" : "1.9.0" // add for Vue 2
安裝了Vite插件后，我們現(xiàn)在還可以刪除vue模板編譯器，因為Vite vue插件有這個功能。
// package.json
"vue-template-compiler": "^2.6.11" //remove (SFC support provided by vite vue plugin)
第2步：僅支持現(xiàn)代瀏覽器
既然Vite是下一代的構(gòu)建工具，所以我們可以只支持現(xiàn)代的瀏覽器。這將使我們的構(gòu)建盡可能精簡和快速。實際上，這意味著我們可以將Babel完全從依賴關(guān)系中移除，因為大多數(shù)移動和pc瀏覽器幾乎完全支持所有ES6功能。如果您仍然需要支持Internet Explorer 11等較舊的瀏覽器，Vite會為此提供一個官方插件。所以，要刪除Babel，首先我們要刪除 babel.config.js文件。接下來，前面我們已經(jīng)刪除了@vue/cli babel插件依賴項，我們還需要從package.json文件中刪除幾個其他與babel相關(guān)的依賴項。
// package.json
"babel-eslint": "^10.1.0", // remove
"core-js": "^3.6.5", // remove
因為已經(jīng)刪除了'babel eslint'，我們還需要在.eslintrc文件中刪除的將其作為解析器的配置 。
// .eslintrc
// remove
parserOptions: {
parser: "babel-eslint",
},
最后，當(dāng)我們在.eslintrc我們需要將env從node更新為'es2021'，因為我們只支持那些現(xiàn)代瀏覽器。
// .eslintrc
env: {
node: true, // remove
es2021: true,
}
這一操作還將更新eslint本身，以及eslint-plugin-vue插件，以支持es2021環(huán)境。
$ npm install eslint@8 eslint-plugin-vue@8
第3步：添加Vite配置
在這一步中，讓我們?yōu)閂ue項目配置Vite。Vite通過項目根目錄中的vite.config.js文件進行配置。以下是使用npm init vite@latest命令創(chuàng)建的Vite項目默認(rèn)配置文件。
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
讓我們再增加2個配置項。首先，我們將從 vite-plugin-vue2 導(dǎo)入Vue插件，而不是官方的vite-Vue插件。
// vite.config.js
import vue from '@vitejs/plugin-vue' // remove
import { createVuePlugin as vue } from "vite-plugin-vue2";
//...
如果您使用的是Vue 3，當(dāng)然不必這樣做。
其次，為了讓@別名像在Vue CLI中一樣工作，我們需要添加下面這個配置項。
// vite.config.js
//...
const path = require("path");
export default defineConfig({
//...
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
第4步：移動index.html文件
與Vue CLI不同，Vite會將index.html文件放置在項目的根目錄中，而不是public目錄中，因此需要移動它。在index.html我們需要做一些改變。
首先，我們需要將<%= htmlWebpackPlugin.options.title %>占位符改為硬編碼值。
// index.html
<!--remove-->
<title><%= htmlWebpackPlugin.options.title %></title>
<!--add-->
<title>Hard Coded Title</title>
//...
<!--remove-->
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<!--add-->
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
我們還需要把“<%=BASE_URL%>”占位符改為絕對路徑。
// index.html
<!--remove-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--add-->
<link rel="icon" href="/favicon.ico">
最后也是最重要的一點，應(yīng)用程序不再是自動注入的，所以我們需要像這樣引入它：
<script type="module" src="/src/main.js"></script>
第5步：更新腳本命令
回到package.json文件，我們需要將舊的vue-cli-service命令更改為特定于Vite的命令。
// package.json
"serve": "vue-cli-service serve", // remove
"build": "vue-cli-service build", // remove
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
請注意，啟動開發(fā)服務(wù)器的命令不再是serve。Vite使用dev代替，serve命令用于在本地預(yù)覽應(yīng)用。此外，如果啟用了linting，則應(yīng)更新lint腳本以直接運行eslint。
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
第6步：更新環(huán)境變量
環(huán)境變量在Vite中的工作方式與在Vue CLI中的工作方式之間存在很多相同的地方。例如，你的.env命名約定可以保持不變。
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git
但是，我們不能現(xiàn)在在process變量上的訪問環(huán)境變量。取而代之的是 import.meta.env中找。
// router/index.js
base: process.env.BASE_URL, //remove
base: import.meta.env.BASE_URL,
第7步：添加.vue擴展到SFC
雖然我們新創(chuàng)建的Vue CLI項目已經(jīng)做到了這一點，但我敢打賭，您現(xiàn)有的應(yīng)用程序可能沒有做到這一點。因此，必須確保所有單文件組件的導(dǎo)入都以.vue結(jié)束。
// Home.vue
import HelloWorld from "@/components/HelloWorld.vue"; // .vue is required
可以通過在vite.config.js文件中的resolve.extensions配置項添加.vue完成這項配置。
// vite.config.js
//...
export default defineConfig({
plugins: [vue()],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
//...
},
});
第8步：清理魔術(shù)注釋
最后，我們可以刪除所有用于命名動態(tài)導(dǎo)入的魔術(shù)注釋，因為這些是webpack的專屬注釋，對vite而言沒有意義。
// router/index.js
import(
/* webpackChunkName: "about" */ // remove
"../views/About.vue"
),
取而代之的是，Vite會根據(jù)原始的.vue文件自動命名。如：About.37a9fa9f.js。
第9步：享受更快、更無縫的開發(fā)體驗
完成上述步驟1-8后，應(yīng)用程序就可以使用Vite運行了！用npm run dev啟動開發(fā)服務(wù)器，看看Vite有多快。
?譯自：https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/