vite搭建vue3,vuecli vite

　　Vite是一个开发环境工具，旨在加速我们的开发。下面这篇文章主要介绍如何在老的vue项目中加入Vite支持的相关信息，有需要的可以参考一下。

1、前言

　　我接手公司的一个项目已经两年了。现在每次启动项目都要近一分钟，hmr也要几秒钟。but vite2发布后，我看到了曙光，但一直没有开始升级。昨天终于忍不住了，升级后几秒钟就完成了。

　　vue作者尤雨溪开发的web开发工具Vite ——有以下特点：

　　快速冷启动

　　即时模块热更新

　　真正的按需编译

2、开始升级

　　注：只是升级了开发环境，包还是webpack(我也试过用vite打包，但是打包之后发现iview的字体图标有问题。最初的验证是静态资源的问题，vite打包后的静态资源默认放在assets下。如果有什么解决方法，请告诉我解决方法)

2.1 安装vuecli插件vite

　　Vue add vit # add vite插件

　　安装插件后，它将被添加到package.json中的脚本中：

　　{

　　脚本:{

　　vite :节点。/bin/vite

　　}

　　}

　　使用pnpm的同学，如果项目根目录下没有. npmrc文件，请自行添加，并在文件中可耻地添加-葫芦=true否则，vite插件的安装可能会失败。

2.2、运行项目并排查错误

2.2.1、TypeError: Cannot read property alias of undefined

　　这个错误是因为vue.config.js中的configureWebpack只能使用objects的配置方法(vue cli同时支持对象和函数)。

2.2.2 Unrestricted file system access to "/src/components/editPwd

　　这个问题的原因是vite的默认配置中的扩展不包含。vue解决方法：

　　1.向vue.config添加扩展

　　//vue.config.js

　　模块.导出={

　　configureWebpack:{

　　解决：{

　　扩展名：[。mjs ，。js ，。ts ，。jsx ，。tsx ，。json ，。vue]

　　}

　　}

　　}

　　2.所有vue组件都以后缀导入。vue。

2.2.3、启动端口不是8080

　　vite的默认引导端口是3000，所以需要在vue.config.js中给devServer添加port:8080

　　//vue.config.js

　　模块.导出={

　　devServer:{

　　端口：8080

　　}

　　}

2.2.4、开发时的代理失效

　　代理失败的原因：vuecli中的重写配置是pathRewrite，而在vite中是rewrite。

　　解决方法：

　　模块.导出={

　　devServer: {

　　端口：8080，

　　代理服务器：{

　　/api/cost/: {

　　目标：“http://本地主机：9331”，

　　changeOrigin:真的，

　　路径重写：{

　　^/api/cost/: /，

　　},

　　rewrite:path=path . replace(/\/API \/cost \//，/)，//调整vite

　　},

　　/api/import/: {

　　目标：“http://本地主机：9332”，

　　changeOrigin:真的，

　　路径重写：{

　　^/api/import/: /，

　　},

　　rewrite:path=path . replace(/\/API \/import \//，/)，//适应vite

　　},

　　/api/: {

　　目标：“http://本地主机：9333”，

　　ws:没错，

　　changeOrigin:真的，

　　路径重写：{

　　^/api/: /，

　　},

　　rewrite:path=path . replace(/\/API \//，/)，//适应vite

　　},

　　},

　　},

　　}

3、升级完成

　　至此，整个升级过程结束。总的来说还是比较顺利的，坑也不是太多。这是一些很容易解决的问题。

　　关于如何给旧的vue项目添加vite支持的文章到此结束。更多关于在旧vue项目中添加vite的相关内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。