Migrate From Vue-cli to Vite

背景

我最近將一些 Vue2 項目從 vue-cli(webpack)遷移到了 vite。

在第三次這樣作以後，我對遷移過程作了一些詳細的記錄，並將在這篇文章中進行總結。

文章目錄：

• package.json
• index.html
• vite.config.js
• 測試用例
• Lint
• 發佈
• 可視化 Bundle
• 一些指標
• 結論

正文

package.json

devDependencies

刪除 @vue/cli-service 依賴項，並替換爲 vite 🚀

npm un @vue/cli-service
npm i vite -D

你也能夠刪除任何其餘以 @vue/cli-plugin-xxx 開頭的開發依賴項，由於它們將再也不起做用，例如：

npm un vue/cli-plugin-babel vue/cli-plugin-eslint vue/cli-plugin-unit-jest

若是你使用的是Vue2，咱們還要補充vite-plugin-vue2, 這個會用在vite.config.js中：

npm i vite-plugin-vue2 -D

另外，若是你使用的是git hooks，則可能須要顯式安裝yorkie才能使全部內容像之前同樣工做。

npm i yorkie -D

scripts

咱們將 serve 在 vite 中用相應的腳本替換 vue-cli 腳本：

固然，你也能夠保留 serve。

其餘腳本，好比build, jest, lint， 以後也會講到。

index.html

繼續，把 public/index.html 移至項目的根目錄。1️⃣

咱們還將添加vite須要的入口點：

<script type="module" src="/src/main.js"></script> 2️⃣

最後，咱們會從咱們的替代路徑圖標 <%= BASE_URL %> favicon.ico（vite會在您的公用文件夾中爲您找到該圖標）。3️⃣

vite.config.js

咱們須要將之前的版本轉換 vue.config.js 爲新版本vite.config.js。

讓咱們從如下幾行開始：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
  plugins: [
    createVuePlugin(),
  ],
})

遷移的時候， 對開發儘可能保持透明，一些配置要和以前的保持一致， 好比端口：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
  [...],
  server: {
    port: 8080,
  }
})

你將在此處找到全部可能的配置選項：https://vitejs.dev/config/#co...

'@'別名

若是你在webpack中使用了別名導入文件，則如今你須要從新建立它：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
  [...],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      }
    ]
  },
})

".vue" 導入路徑

使用 webpack 你能夠忽略 .vue 文件後綴， 可是在 vite 中不行， 須要帶上。

// From
import DotsLoader from '@/components/DotsLoader'

// to
import DotsLoader from '@/components/DotsLoader.vue'

路由延遲加載簡化

在 Route 聲明中，你能夠安全地刪除 webpackChunkName 可能有的任何註釋，例如該行：

{
  path: '/links',
  name: 'linksPage',
  component: () => import(/* webpackChunkName: "links" */ './views/LinksPage.vue'),
},

簡化爲：

{
  path: '/links',
  name: 'linksPage',
  component: () => import'./views/LinksPage.vue'),
},

在這裏我不是專家，可是若是您真的想自定義塊的名稱，則能夠經過覆蓋彙總output.entryFileNames來實現。

另請參見 vite build.rollupOptions，瞭解如何直接將某些選項傳遞給 rollup.

環境變量

Vite 不識別 process.env, 取而代之的是：import.meta.env.

舉個例子：

須要注意的是，要確保NODE_ENV=production, 你須要在.env文件或生產環境變量中進行設置。

參見官方文檔： https://vitejs.dev/guide/env-...

至於自定義環境變量，咱們再也不須要像之前那樣爲它們加上前綴VUE_APP，而是如今須要使用VITE。

任何以VITE_xxx開頭的變量都須要你在代碼中提供。

好比 .env.local 文件中的一個變量：

VITE_APP_BACKEND_URL=http://localhost:3001

測試用例

如今咱們不能再使用 vue-cli-service test:unit了，讓咱們從新配置。

首先，能夠更新 test 腳本：

若是你的babel.config.js文件中包含相似內容：

presets: ['@vue/cli-plugin-babel/preset'],

須要替換爲：

presets: ['@babel/preset-env']

我也有與import.meta.env語句錯誤。

不幸的是，目前尚無針對單元測試的現成設置，但此評論對我有所幫助：

https://github.com/vitejs/vit...

個人 babel.config.js 文件如今看起來是：

module.exports = {
  presets: ['@babel/preset-env'],
  // For Jest not to be annoyed by 'import.meta.xxx'
  plugins: [
    function () {
      return {
        visitor: {
          MetaProperty(path) {
            path.replaceWithSourceString('process')
          },
        },
      }
    },
  ],
}

或者，你可使用此Babel插件，該插件也能解決import.meta在測試中的問題：
https://github.com/javiertury...

在這裏，能夠關注有關 vite 和 Jest 的一些討論：
https://github.com/vitejs/vit...

「regeneratorRuntime」 error

49 | export const actions = {
> 50 |   init: async ({ commit }, routeContext) => {
ReferenceError: regeneratorRuntime is not defined

regenerator-runtime 在個人setupTests.js中安裝並引用, 彷佛已解決了該問題。

npm i regenerator-runtime -D

'jest.config.js'：

module.exports = {
  moduleFileExtensions: [
    'js',
    'json',
    // tells Jest to handle `*.vue` files
    'vue',
  ],
  transform: {
    // process `*.vue` files with `vue-jest`
    '.*\\.(vue)$': 'vue-jest',
    // process `*.js` files with `babel-jest`
    '.*\\.(js)$': 'babel-jest',
  },
  setupFiles: ['./setupTests'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  collectCoverage: false,
};

而後是個人「 setupTests.js」的第一行：

import 'regenerator-runtime/runtime';

Lint

只須要替換兩個與lint有關的腳本便可：

發佈

在此示例中，個人應用由S3 / CloudFront提供。

我有兩個生產環境：preprod 和 prod。

因此，我有兩個.env文件：

1. .env.preprod
2. .env.prod

當使用 rollup 構建時，vite 將根據調用構建腳本時使用的模式，用其值替換咱們的環境變量。

這與 vue-cli 很是類似，所以更新咱們的 package.json腳本就很是簡單直接：

有關此的更多詳細信息，請在此處進行詳細說明：
https://vitejs.dev/guide/env-...

Tips 還必須覆蓋「 vite.config.js 」中，最大包的大小：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
  [...],
  build: {
    chunkSizeWarningLimit: 700, // Default is 500
  },
})

可視化 Bundle

"build:report": "vue-cli-service build --report",

我使用 rollup-plugin-visualizer 來完成這個功能。

導入這個插件，並在個人vite.config.js中引用它：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import visualizer from 'rollup-plugin-visualizer'
export default defineConfig({
  plugins: [
    createVuePlugin(),
    visualizer(),
  ],
  [...],
})

打開新生成的stats.html文件時，這是個人結果：

這個和咱們經常使用的 webpack-bundle-analyzer 是相似的。

一些指標

啓動時間

• 用 vite 啓動：〜4秒（即便項目持續增加，它也應該保持不變🙌）
• 用 vue-cli/webpack啓動：大約30秒（隨着咱們向項目中添加更多文件，它將不斷增長😢）

熱更新

vite：

簡單的更改（HTML標記，CSS類...）：馬上生效。

複雜的更改（從新命名JS函數，添加組件…) :不肯定，有時候我更喜歡本身刷新。

vue-cli/webpack：

簡單的的更改：〜4sec😕

更復雜的更改：我從不等待，而是手動刷新頁面。

首次頁面請求

當vite啓動後, 第一次請求一個包含不少組件的複雜頁面，讓咱們看一下 Chrome DevTools 中的network標籤:

• vite：〜1430 JS文件請求, 在〜11秒內完成 😟
• vue-cli/webpack：約23個JS文件請求, 在約6秒內完成 👍

在這個方面來看，能夠採起一些優化策劃， 好比組件懶加載等。

結論

總的來講，到目前爲止，使用 vite 的開發體驗很是好，🌟 🌟 🌟 🌟 🌟

對於仍然使用 webpack 的項目，狀況可能會變得愈來愈艱難。

好了， 內容大概就這麼多， 但願對你們有所幫助。

才疏學淺，若有錯誤， 歡迎指正。

謝謝。

最後，若是以爲內容有幫助， 能夠關注下個人公衆號，掌握最新動態，一塊兒學習！