我在vue2重生之升级vite加强版

1. 在不影响功能的情况下升级vue和vite版本

1. 升级vue到2.7.16版本，npm install vue@2.7.16
2. 升级vite到4.0.0以上，npm install vite@4

升级插件的主要目的是：

• ① 解决项目中通过import方式引入的json文件无法build成功;
• ②@rollup/plugin-commonjs插件无法正确转换模块引用的问题，需要配置两个必要参数: {transformMixedEsModules: true, extensions: ['.js', '.vue']}

2. 把之前使用的vue插件替换一下

1. 将vite-plugin-vue2替换成@vitejs/plugin-vue2，

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

// - createVuePlugin()
// + vue()

2. dev时候需要转换commonjs的插件还是用@originjs/vite-plugin-commonjs
3. 模板处理插件还是用vite-plugin-html

3. 其他问题

1. vant组件样式按需加载的问题

   需要引入相关插件进行自动引入

• 安装插件: npm i unplugin-auto-import unplugin-vue-components @vant/auto-import-resolver -D
• 配置插件:

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
{
  plugins: [AutoImport({ resolvers: [VantResolver()] }), Components({ resolvers: [VantResolver()] })]
}

2. 如果之前项目中实例化vue使用的是下面这种方式，有两种方案进行改造

import App from './App.vue'
new Vue({
  el: '#app',
  components: { App },
  template: '<App />'
})

• ① 修改实例化方式使用render函数

import App from './App.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

• ② 在vite.config.js中配置vue引入的指向

import path from 'path'
{
  resolve: {
    alias: [{ find: 'vue', replacement: path.resolve(__dirname, 'node_modules/vue/dist/vue.esm.js') }]
  }
}