[提升10倍速]vue升级Vite复盘总结

1、前言

新入职公司，使用的是vue2+webpack4/5，虽然配置了很多编译优化，但启动和开发热更新速度依然很慢，极大的影响了开发效率，于是准备升级vite来优化，现在已成功升级，来复盘记录下过程，这里只记录下迁移过程和遇到的问题。

Vite利用了浏览器对ES Module的原生支持，在开发期间仅编译和缓存实际改动的模块，这显著提升了开发环境的响应速度和开发效率，相比之下，Webpack在开发模式下会对所有模块进行完整的打包，导致大型项目启动和编译缓慢。

2、迁移前后对比

3、迁移流程

3.1、先创建新的vite项目

3.2、vite项目默认支持vue3，需要把vue改成vue2版本后配置@vitejs/plugin-vue2插件支持vue2

3.第二个报错, Failed to resolve import “./App” from "src/main.js3、把项目代码改成vue2写法，确保新vite项目可以正常运行vue2

3.4、把原webpack项目生产环境依赖复制到vite项目，剔除掉webpack相关的插件依赖

3.5、复制原项目src文件代码和其他业务相关代码到新vite项目

3.6、新vite项目配置开发环境启动命令，根据报错信息来进行调整

4、迁移业务代码到vite项目

4.1创建新的vite项目

yarn create vite my-vue-app --template vue # 脚手架安装
cd my-vue-app  # 切换到项目根目录
yarn  # 安装依赖
yarn dev # 运行项目

4.2 配置vite支持vue2

配置vite支持vue2，修改 vue.config.js

yarn add @vitejs/plugin-vue2 -D # 安装依赖
yarn add vue@2 -S  # 修改vue版本  因为vite默认是vue3

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
plugins: [
vue()
]
...
})

main.js，创建vue实例改为vue2写法

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

修改App.vue文件代码为vue2格式代码

<template><h1>{{title}}</h1></template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'webpack3迁移vite2'
    }
  }
}
</script>

4.3 复制原项目业务代码

4.3.1、复制原项目静态目录static下文件到vite项目public文件夹下

4.3.2、复制原项目index.html文件内容替换vite项目的index.html内容(注意本地静态资源引入的路径)，替换后需要在body结束标签前添加

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

4.3.3、复制package.json中生产环境依赖到新vite项目,去除webpack相关配置依赖，此时最新的vite代码

4.3.4、复制原项目src业务文件代码，直接替换vite项目src文件

5、项目开发阶段报错处理

5.1 第一个报错，The following dependencies are imported but could not be resolved(以下依赖项已导入，但无法解析):

vite.config.js添加 alias规则

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  ...
  resolve: {
    /** 添加alias规则 */
    alias: [
      {
        find: '@/',
        replacement: '/src/'
      }
    ],
  },
})

5.2 第二个报错, Failed to resolve import “./App” from "src/main.js

报错是由于引入App组件的时候没有带文件后缀.vue,所以未找到，此时有两种解决方案

5.2.1 手动添加.vue后缀，但是项目这么庞大，很多地方都没有带后缀，全部改肯定不容易。

5.2.2 配置vite.config.js的extensions字段，来添加自动查找文件扩展名后缀。

5.3 第三个报错, Uncaught SyntaxError: The requested module ‘/node_modules/@jiaminghi/c-render/lib/index.js?v=2ac9c1dd’ does not provide an export named ‘default’

由于项目引用了data-view插件，导致报错（github官方解决方案配置vite.config.js：）

export default defineConfig({
  ...  
  resolve: {
   ...
    alias: [
      {
        find: /@jiaminghi\/.+/, replacement: path => {
          path = path.replace('lib', 'src')
          if (/^[^/]+$/.test(path))
            path = `${path}/src`
          else if (/\.css$/.test(path))
            path = path.replace('src/components', 'lib/components')
          return path
        }
      },
    ],  },
})

5.4 第四个报错, require is not defined（vite不支持require语法）

由commonjs 语法 require 导入模块和图片引起的报错

// 如批量导入store模块
require.context('@/views/modules', true, /store\.js$/) 
// 改为import.meta.glob
import.meta.glob('../views/modules/**/*/store.js', { eager: true })


// require导入图片
const emptyIcon = require('@/assets/images/empty1.png')
// 改为import导入
import emptyIcon from "@/assets/images/empty1.png"
// 也可以通过import.meta.glob()导入
import.meta.glob('/src/assets/images/*/*.png', { eager: true})

5.5 第五个报错, Can’t find stylesheet to import.

在element-variables.scss文件中使用@import了element-ui的主题文件，使用~前缀,而vite解析不了，所以没有找到对应的文件

需要把前缀~去掉，直接去引用node_modules下的主题样式文件即可，但是由于element-ui使用calc语法，在sass2.0.0版本会删除对该方法的支持，所以控制台会报警告。不影响正常项目运行，如果要解决的话，降低sass的版本就可以了。

yarn add sass@1.30.0 -D

6、项目打包阶段处理

6.1 处理项目兼容低版本浏览器

vite打包后默认目标浏览器是指向现带浏览器，就是支持es module的浏览器，可是在很多时候我们需要兼容低版本的浏览器（比如仙桃园区需要兼容chrome77），vite官方为我们提供了开箱即用的插件@vitejs/plugin-legacy

yarn add @vitejs/plugin-legacy -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
plugins: [
vue(),
legacy({
    targets:['ie 11']
}))
]
})

6.2 处理css加前缀问题

原项目配置了pocss-loader来打包时自动加css前缀来兼容低版本浏览器，所以迁移到vite后也需要处理下，在vite中可以采用autoprefixer来实现

yarn add autoprefixer -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
css: {
    postcss: {
      plugins: [
        require('autoprefixer')({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 9', '> 1%'],
          grid: true,
        }),
      ]
    }
}
})

总结

支持，vue项目成功升级，并适用所有vue2项目。同时，上面的错误处理解决大部分错误。但是也要视具体项目而言，毕竟每个项目引用的插件可能不太一样。导致的问题可能也有差异。

比如：vue-pdf导致的报错，基本无解。最后只能选择vue-pdf-embed插件平替来解决。

升级成功的开发体验和效率提升的不止一点点，特别是大点的项目，体验感非常好。原来要等到几分钟的，现在都是秒开。