Vue2老项目使用vite2升级

Vue2老项目使用vite2升级

基础配置

1. 安装npm包

npm install vite -D
npm install @vue/compiler-sfc -D
npm install vite-plugin-vue2 -D

2. 新建vite.config.js

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
import {resolve} from 'path'
​
function pathResolve(dir) {
  return resolve(process.cwd(), '.', dir)
}
// vite.config.js
export default defineConfig({
  server: {
    host: '0.0.0.0',
  },
  plugins: [
    createVuePlugin({
      vueTemplateOptions: {}
    }),
  ],
  resolve: {
    extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      // vue2项目别名一般都是@，vue3中一般使用/@/, 为方便使用
      '@': resolve('src')
    }
  }
})

3. 给index.html增加main.js入口

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

遇到的一些问题和解决方案

1. 文件后缀省略导致页面报错404(例：vue文件引入时，webpack只需要文件名)，在vite.config.js配置resolve.extensions中添加对应后缀，vite默认有['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']。

2. 页面打开显示报错

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

   ​
   new Vue({
     el: '#app',
     router,
     // 原 component template引入
     components: { App },
     template: '<App/>'
   })
   

   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'
     }
   }
   

4. eventbus兼容。由于vue3舍弃了$on,$off,$emit等eventbus中需用到的方法，vue2项目升级需自定义eventBus功能，新项目开发可以使用mitt插件。

class EventBus {
  constructor() {
    this.busList = {}
  }

  // 订阅
  $on(name, fn) {
    this.busList[name] = this.busList[name] || [];
    this.busList[name].push(fn);
  }

  // 发布
  $emit(name, data) {
    if (this.busList[name]) {
      this.busList[name].forEach((fn) => {
        fn(data);
      });
    }
  }
  // 取消订阅
  $off(name) {
    if (this.busList[name]) {
      delete this.busList[name];
    }
  }
}

export default new EventBus()