vue2旧项目迁移到vite开发，提升编译效率

旧项目太庞大，每次开发都很费时间，保存预览一次需要3-4s的时间（首次编译时间2min）。已经升级用 webpack4的情况下，项目最早是 webpack3，编译一次，7-10s的时间，大大影响效率。

想着再用vite升级一下开发效率

迁移准备

1. 备份项目很重要
2. 在工作项目不是很忙的时间段，升级
3. 随时能google

开始升级

安装vite及相关依赖

yarn add -D vite\
@vitejs/plugin-vue2\ # 支持vue2 @vitejs/plugin-vue 支持vue3，本文是基于vue2升级
@originjs/vite-plugin-require-context\ # 兼容webpack里面的require.context()
vite-plugin-dynamic-import\ # 兼容 import('@views/' + path) 把@转成绝对路径去动态引入
@originjs/vite-plugin-commonjs # 扩展支持 commonJS

新建配置vite.config.js

import { resolve } from 'path'
import fs from 'fs'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue2' // 官方支持的vue2插件
// 兼容webpack里面的require.context() 把require.context() 转成 import ... from ...的方式
import viteRequireContext from '@originjs/vite-plugin-require-context'
// 兼容 import('@views/' + path) 把@转成绝对路径去动态引入
import dynamicImport from 'vite-plugin-dynamic-import'
// 扩展支持 commonJS
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

/* 如果 node version >= 16，获取当前脚本执行路径需要这样设置
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
function resolvePath(str: string) {
  return path.resolve(__dirname, str)
} */

function resolvePath(str) {
  return resolve(__dirname, str)
}

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    base: mode === 'production' ? '/fun/admin/' : '/',
    build: {
      rollupOptions: {
        input: {
          main: resolve(__dirname, 'index.vite.html'),
        },
      },
    },
    css: {},
    define: {
      'process.env': env,
      __APP_ENV__: env.APP_ENV,
    },
    plugins: [
      vue(),
      viteCommonjs(),
      viteRequireContext(),
      dynamicImport(),
    ],
    resolve: {
      extensions: ['.vue', '.js', '.mjs', '.ts', '.jsx', '.tsx', '.json'],
      alias: {
        vue$: resolvePath('./node_modules/vue/dist/vue.esm.js'),
        '@': resolvePath('./src'),
        '@assets': resolvePath('./src/assets'),
      },
    },
    server: {
      fs: {
        strict: false,
      },
      port: 8086,
      host: '0.0.0.0', // 指定服务器应该监听哪个IP地址，如果将此设置成'0.0.0.0'将监听所有地址
      strictPort: false, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
      open: false,
      proxy: {
        '/api': {
          target: 'http://example.com', // 
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
      },
    },
  }
})

将public下边的index.html复制一份放到根目录，跟vite.config.js同级。然后在里面引入项目入口文件main.js，修改里面引入其他文件的路径

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

在 package.json 里面 添加 运行 vite 的 脚本

遇到问题

1. babel 依赖过久，需要升级

2. 页面报错，显示需要使用带编译模板的vue版本

解决方法：修改main.js中的App.vue组件引入方式。

​
new Vue({
  el: '#app',
  router,vue
  // 原 component template引入
  components: { App },
  template: ''
})
复制代码

new Vue({
  el: '#app',
  router,
  // 改为 render
  render: h => h(App)
})

3. 入口文件不是index.html，或者不在根目录，导致资源报错404.

• vite官网说明：vite本质是启动一个基于项目目录的静态服务器，所以非index.html的入口文件只需要在url后跟上相应的html路径就行了

  index.html => ip:port
  start.html => ip:port/start.html
  /vite/index.html => ip:port/vite/index.html
  

  这样开发环境就可以访问了，然后解决打包问题，需要修改vite.config.js中的build.rollupOptions配置

  // 以start.html为例
  build: {
    rollupOptions: {
      input: process.cwd() + '/start.html'
    }
  }