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

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

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

迁移准备

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

开始升级

安装vite及相关依赖

yarn add -D vite\
@vitejs/plugin-vue2\ 
@originjs/vite-plugin-require-context\ 
vite-plugin-dynamic-import\ 
@originjs/vite-plugin-commonjs 

新建配置vite.config.js

import { resolve } from 'path'
import fs from 'fs'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue2' 

import viteRequireContext from '@originjs/vite-plugin-require-context'

import dynamicImport from 'vite-plugin-dynamic-import'

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

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

export default defineConfig(({ command, mode }) => {
  
  
  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', 
      strictPort: false, 
      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
  
  components: { App },
  template: '<App/>'
})

修改为

new Vue({
  el: '#app',
  router,
  
  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'
  }
}

至此，升级迁移vite完成。