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 的项目，状况可能会变得愈来愈艰难。

好了， 内容大概就这么多， 但愿对你们有所帮助。

才疏学浅，若有错误， 欢迎指正。

谢谢。

最后，若是以为内容有帮助， 能够关注下个人公众号，掌握最新动态，一块儿学习！