最近新建了一个vue3项目, 发现一个警告很烦, 我用的是默认的vue-cli去构建的项目
![](https://i-blog.csdnimg.cn/blog_migrate/4e835991c3a7229eb3bef4103871edb8.png)
在网上查询了一些方法,都说修改vue.config.js的一些配置可以解决问题,如图我注释的代码,我尝试过也不太行 , 于是我直接将cli打包换成了vite打包
![](https://i-blog.csdnimg.cn/blog_migrate/020ebaa54957c07b128b01b0333594eb.png)
1 首先创建一个vite项目
npm init vite // 往下会有vue react ts js等选项
2 将cli打包的package.json中的插件过渡到vite项目中的package.json , 再把src复制到vite项目中 (因为我已经开发了一些功能了,echarts element-plus less等插件不想再一一下载了)
![](https://i-blog.csdnimg.cn/blog_migrate/17b910d1354d68c47484e467553cf2f8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/60f4ab10ae9d109cfcf6de56ea719b71.png)
3 目前在router/index.js中会报以下的错误 (因为在vite中没有默认配置BASE_URL
环境变量)
![](https://i-blog.csdnimg.cn/blog_migrate/0e17e6df66680745a20e26bd0b542876.png)
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: '开始训练',
component: () => import('../views/dirll.vue')
},
{
path: '/deploy',
name: '开始部署',
component: () => import('../views/deploy/deploy.vue')
},
{
path: '/vessel',
name: '容器',
component: () => import('../views/vessel/vessel.vue')
},
{
path: '/help',
name: '帮助',
component: () => import('../views/help/help.vue')
}
]
const router = createRouter({
// history: createWebHistory(process.env.BASE_URL), // 在cli项目中的代码
history: createWebHistory(import.meta.env.BASE_URL), // 需替换成该代码
routes
})
export default router
4 最后就是下载依赖 跑项目了
npm install
npm run dev // 这一步终端会提示,以提示为主