1. 在不影响功能的情况下升级vue
和vite
版本
- 升级
vue
到2.7.16
版本,npm install vue@2.7.16
- 升级
vite
到4.0.0
以上,npm install vite@4
升级插件的主要目的是:
- ① 解决项目中通过
import
方式引入的json
文件无法build
成功; - ②
@rollup/plugin-commonjs
插件无法正确转换模块引用的问题,需要配置两个必要参数:{transformMixedEsModules: true, extensions: ['.js', '.vue']}
2. 把之前使用的vue
插件替换一下
- 将
vite-plugin-vue2
替换成@vitejs/plugin-vue2
,
// - import { createVuePlugin } from 'vite-plugin-vue2'
// + import vue from '@vitejs/plugin-vue2'
// - createVuePlugin()
// + vue()
dev
时候需要转换commonjs
的插件还是用@originjs/vite-plugin-commonjs
- 模板处理插件还是用
vite-plugin-html
3. 其他问题
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()] })]
}
- 如果之前项目中实例化
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') }]
}
}