vscode运行vue项目每次保存后构建速度很慢(vscode运行vue文件)
本篇文章给大家谈谈vscode运行vue项目每次保存后构建速度很慢,以及vscode运行vue文件对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、vue3创建项目vue create project过程很慢加载不动
- 2、visualstudiocode运行vue项目卡住不动
- 3、vue-cli4.4.4创建项目很慢问题
- 4、在 VS Code 中调试vue项目
- 5、vuebuild很慢
- 6、VSCode调试vue项目
vue3创建项目vue create project过程很慢加载不动
三种方法:推荐第三种
修改vueclie构建的npm源:
打开C:\Users\admin.vuerc文件
useTaobaoRegistry配置如果是true改为false就可以了,或者情况相反的改为true。
1.安装cgr切换源
2.查看有哪些源
3.切换源
上两种方法有时会不成功,推荐使用方法三
安装 开发者边车 (dev-sidecar)
开发者边车,命名取自service-mesh的service-sidecar,意为为开发者打辅助的边车工具,通过本地代理的方式将https请求代理到一些国内的加速通道上
支持windows,MAC
1.安装方法及说明:
稳步github
如github打不开,可以 用Gitee镜像地址
2.安装成功后,打开dev-sidecar软件
3.在首页默认模式中开启npm加速
4.再用vue create project创建项目
注:创建项目前反npm源回复到默认状态,不要用taobao或其它了
visualstudiocode运行vue项目卡住不动
1、CPU资源占用高:打开任务管理器,CPU占比在90%以上,按CPU占比排序,若其中reg.exe出现多个且CPU占比较高,则使用此方法优化:新版本设置方法:文件首选项设置,把“Search:Follow Symlinks”下的控制是否在搜索中跟踪符号链接的勾选去掉。
2、卡死或系统崩溃:若计算机上安装有谷歌浏览器,在同时使用谷歌浏览器和VS Code时,出现VS Code卡死或者系统崩溃时,使用此方法优化:打开谷歌浏览器设置系统,关闭启用硬件加速。
vue-cli4.4.4创建项目很慢问题
安装vue-cli新版本4.4.4,执行vue create xxx,半天都创建不成功,网上搜了好多解决方案,然而并没有解决我的问题。经过一番尝试,解决了自己的问题,做下记录:
默认npm镜像我是使用的淘宝的,设置成npm的就好了
npm config set registry
踩过坑:
修改.vuerc文件中 "useTaobaoRegistry"属性,我本地默认是false,后来改成true,没什么作用。来回修改了好几遍没效果,后来查看npm的镜像配置发现修改.vuerc文件中 "useTaobaoRegistry"属性,npm的镜像并没有修改。
可以通过 npm config get registry 查看自己npm的镜像源
在 VS Code 中调试vue项目
1.VS Code 中安装Debugger for Chrome扩展的最新版本:
2.在config/development.config.js(官网描述的是config/index.js,所以需要根据具体的项目而定)中添加如下配置:
3.点击运行调试按钮,再点击设置按钮,修改launch.json文件,配置如下:
4.在vue项目的文件中设置断点
5.启动vue项目:
6.点击运行调试按钮,再点击运行小图标,这时会弹出新的chrome浏览器页面。
7.在弹出的浏览器窗口的页面进行操作,触发断点时会跳转掉vscode的断点处。
遇到的问题:
官网中的launch.json配置中"url": " ",url的端口是8080,这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。
参考:
在 VS Code 中调试:
vuebuild很慢
运行太多。该系统太慢是因为运行太多导致的,vuebuild文件夹里面是对webpack开发和打包的相关设置,包括入口文件、输出文件、使用的模块等。
VSCode调试vue项目
先决条件
你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。
在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。
打开 config/index.js 并找到 devtool 属性。将其更新为:
如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性:
进入Debugger视图,添加Chrome配置,将内容替换成以下内容
设置断点
此处response返回数据
启动调试
在终端使用如下命令开启这个应用
进入Debug视图,选择‘vuejs:chrome’配置,然后按F5或点击绿色的play按钮
随着一个新的 Chrome 实例打开 ,你的断点现在应该被命中了。
vscode运行vue项目每次保存后构建速度很慢的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于vscode运行vue文件、vscode运行vue项目每次保存后构建速度很慢的信息别忘了在本站进行查找喔。