用vite构建vue2项目

用vite创建项目

npm create vite@latest

因为默认创建的是vue3的项目所以要修改几个地方

将package.json中的vue版本修改成2.7.16

"vue": "^2.7.16"

删掉原本的plugin @vitejs/plugin-vue

否则会在install时报错

下载支持vue2的插件@vitejs/plugin-vue2

npm install @vitejs/plugin-vue2

在vite.config.js中修改引入

import vue from '@vitejs/plugin-vue2'

在vite.config.js中添加alias

alias: {
  'vue$': 'vue/dist/vue.esm.js'
}

添加这个alias的目的在于，在低版本浏览器或钉钉内置浏览器中，有些UI库的某些组件不会正确的被渲染，目前已知有ElementUI中的table和tooltip

修改main.js

import Vue from 'vue'
import './style.css'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

原本的createApp是vue3的写法

修改App.vue

默认创建的App.vue中template下是写了两个根元素div和HelloWorld的，而vue2是不支持这种写法的，所以会报错，改成一个根元素的写法即可

ps

其实2.7是支持组合式API的，在一般的情况下单文件中使用 script setup的vue3写法也是没问题的