首先声明:

本方法适合webpack项目,不适合vite项目。

WebStrom配置

1.修改默认浏览器配置

必须添加此配置,才能自动打开谷歌浏览器进行调试。

另外,绿色箭头所指的选项必须要添加,否则调试时自动打开的页面是about:blank。选项是:

--remote-allow-origins=*

 

2.修改webpack配置

修改vue.config.js,一定要有devtool: 'source-map'这个配置。

configureWebpack: {
        devtool: 'source-map',

 }

3.设置调试端口
File=> Settings=> Build,Execution,Deployment=> Debugger=> Build-in Server=> Port

默认是:63342
非必要无需修改它。若非要修改,不要改为8080等影响正常业务的端口。
如果启动时指定的这个端口被占用,则会自动将端口号加1再启动


4.设置debug
法1:快速配置

使用npm启动项目
切换为英文输入法
按住Shift+Ctrl,鼠标点击项目的url。
此时会自动启动调试

 

GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 2 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐