- 通过vite创建vue工程
npm create vite@latest my-vue-app --template vue
- 这个时候创建出来的vue版本是3.*的，那因为我们项目组件库含有历史2.*编写，所以，我们要变更为2.7版本
npm i vue@2.7 vuex@3.0.1 --save
- 再次运行报错， 如下图：
- 此时需要安装一个支持vue2.7的插件,这个插件地址，这个插件地址仅仅服务^2.7.0
npm i @vitejs/plugin-vue2
- 然后在vite.config.js中修改引入方式
import { defineConfig } from 'vite'
- import vue from '@vitejs/plugin-vue'
+ import vue from '@vitejs/plugin-vue2'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
- 我们再次运行，再次报错，如下图，此时我们发现，工程已经开始对vue文件进行编译和语法校验了，我们修改语法为支持2.*
- 此时，编译控制台没有再次报错了，但是刷新页面空白，那我们看一下console页面信息，发现报错了，
- 修改vue实例化方式
+ import Vue from 'vue'
- import { createApp } from 'vue';
import './style.css'
import App from './App.vue'
- createApp(App).mount('#app')
+ new Vue({
+ el: '#app',
+ render: h => h(App),
+ })
-
再次运行页面，我们发现已经没有报错了。
-
接下来，我们把老工程的src复制过来， 页面开始报错。
- vite 不支持require,如果要支持，需要安装如下插件。
npm i vite-plugin-require-transform --save-dev
2. sass报错
根据官网配置安装依赖
- 引入组件路径中省略扩展名，导致找不到引入文件
此时，我们查看配置文件：
至此，我们已经可以在vite+vue2.7版本环境下，把组件库组件跑起来了。
