WebStorm/IDEA开发调试Vue/Webpack的方法

最新推荐文章于 2024-05-11 20:59:37 发布
最新推荐文章于 2024-05-11 20:59:37 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： javascript面向对象编程 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hfma2000/article/details/106569066
版权

1、Vue项目，配置修改：

打开config/index.js文件, 修改source map属性，从cheap-module-eval-source-map改为source-map

2.编辑调试配置，新建JavaScript调试配置，并设置要访问的url，以及Remote url配置

在URL处填写: http://localhost:8080( 具体的端口看自己的程序写的是监听哪一个)

在src的Remote url处填写: webpack:///src

3.启动server，可以使用WebStorm npm scripts中双击start启动server， 也可以在命令行中执行命令npm run start启动server

4.点击debug，调试DebugTest，这时候会打开chrome，如下图所示 :

5、当我们在chrome中运行vue，WebStorm就会响应断点状态，如下图所示:

使用webstorm+vue与后端开发
weixin_45353720的博客
11-25 4670
使用webstorm+vue与后端开发 前端用的webstorm+vue开发,后端用的idea,花了两天的时间自己搭建了一个前端框架连接后端框架。网上查了很多资料,没看到这种文章,有的也是要开会员下载,所有在测试成功后想着自己写一篇,下面进入主题 webstorm+vue框架搭建可以参考这篇文章webstorm创建vue项目 1.先创建一个页面 2.然后在路由里配置创建的页面 3.这里是主页,这...
webstorm入门搭建vue
nil_shen的博客
11-26 3314
背景： 新公司这边用的是vue+springboot的架构方式，以前从来没有接触过，这次在做一个demo前端用到vue，用了已经搭好的项目在上面改的，今天正好有空，自己搭一个最初始的项目先上上手再说。 一、环境安装 1.webstorm的安装，webstorm属于整个 IntelliJ IDEA当中的一员，主要用来处理前端代码的，以前从没用过，坑爹的是这个编辑器貌似没有免费社区版的，所以只能自己想办法激活了。 2.vue环境安装 2.1、win+r，cmd进入dos命令框 2.2、首先运行安装webpack
IDEA vuejs 插件
08-16
为了方便大家下载而上传，只需要1积分，我如果能赚10分，就免费共享了。
使用WebStorm/IDEA开发调试Vue/Webpack工程项目
s_156的博客
10-27 1515
前言之前尝试的各种前端编辑器H5Builder,SublimeText,VSCode,NotePad++等等；作为一名后端开发，自己是从Eclipse系列的IDE转向使用JetBrain系列，深受InteliJ IDEA的毒害近期公司的项目使用VSCode开发。然而作为大集成的IDEA，更能解决开发过程中的问题，无论是代码提示、跳转、插件、提示等等，还是IDEA更加符合自己的使用习惯。环境准备1. nodejs v8.x.x以上2. npm v5.x.x以上3. WebStorm 2017.3 以上 / I
WebPack+WebStorm调试
weixin_30892037的博客
07-17 531
怎么用webstorm来调试WebPack？ 今天查了很多文档，最终在官网上耐心看完英文文档后，才解决。附上链接：https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ 工具简介 Windows7 WebStorm2017 Webpack2 谷歌浏览器（默认浏览器） ...
Vue系列之-Idea进行Vue前端调试
热门推荐
weinichendian的博客
11-03 1万+
前言 最近要做前端项目开发了，但是自己已经好久么有做前端开发，将近3年的时间，想想当初自己那会做前端用的技术点就是Html、Jsp、Js、Jquery、LayUi等等，那时候调试前端，用Eclipse进行开发调试的，现在要做Vue前端开发，发现很多教程都没有用开发工具进行前端调试。调试无非就是打Log、Debugger在浏览器看效果，说实话十分的不方便。 我现在开发工具18年就开始用Idea了，一直用到现在，于是查找用Idea进行Vue前端调试的方法，还真被我找到了，后面可以非常便捷的用Idea进行Vue前
webstorm vue 调试
战鸟的专栏
12-04 750
1、vue.config.js中添加 configureWebpack: { devtool: '#eval-source-map' }, 2、添加npm启动器 3、添加js debug 启动器 4、启动npm启动器，待启动成功 5、启动js debug启动器，可捕获断点
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
10-16
然而，在使用IntelliJ IDEA或WebStorm这样的IDE时，有时可能会遇到Vue CLI脚手架项目无法识别Webpack别名的问题，这会给开发带来不便。本文将详细介绍如何解决这个问题。 首先，Webpack别名是Webpack配置中的一个...
用webstorm开发的element-ui+vue.js的一个前端管理系统，mock模拟数据
04-30
这是一个关于使用WebStorm开发的前端管理系统项目，主要技术栈为Element-UI和Vue.js，并结合Mock数据进行模拟后端交互。下面将详细讲解这个项目的关键知识点。 1. **Vue.js**： Vue.js是一个轻量级的前端...
idea vue 调试_Java 开源的支持多种sql的基于spring boot的代码生成器的调试
weixin_39902875的博客
11-28 121
开篇代码生成工具，在日常的开发中很常见，无论是mybatis的还是mybatisplus的。代码生成器的出现给java攻城狮们节约了大量的宝贵时间。今天就来调一个开源的代码生成器。本文一如既往调试实战。当然如果是您有一定的代码生成经验，可略过，本文只是调试开源项目，本项目不难，调试过程对有经验的同学，略显简单。和一般的spring boot项目没什么不同。如果只对源码感兴趣，请直接到文章末尾，有开...
webstorm搭建vue环境以及通过webpack模板搭建项目流程
08-19
webstorm搭建vue环境以及通过webpack模板搭建项目流程
idea vue 调试_项目中Vue的部分常用配置
weixin_39737947的博客
11-22 760
启用压缩，让页面加载更快在我们开发的时候，为了方便调试，我们需要使用源码进行调试，但在生产环境，我们追求的更多的是加载更快，体验更好，这时候我们会将代码中的空格注释去掉，对代码进行混淆压缩，只为了让js,css文件变得更小，加载更快。但只是这样做是不够的，我们还可以做得更极致。gzip是Web世界中使用的最为广泛的文件压缩算法，当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome...
在webstorm上调试vue代码
g_soledad的博客
04-03 6009
1、进入调试配置 2、新建JavaScript调试配置，并设置要访问的url地址（示例： http://localhost:8081），保存如下图所示: 3、在Terminal内启动项目：npm run dev 4、再启动debug，会启动谷歌浏览器。（如果浏览器页面没有正常显示网页 手动补全url就好） 5、开始调试，在要测试代码的前面点出红点，当程序运行到该行就可以拦截。 6、EN...
IDEA怎样调试运行 vue 项目
anguang1973的专栏
05-11 3219
在 IntelliJ IDEA 中调试运行 Vue 项目涉及几个步骤，从设置项目到配置调试环境。
2021-08-10 idea中调试vue
薄荷糖的博客
08-10 411
idea中调试vue http://www.kailing.pub/article/index/arcid/303.html
intellij-idea+vue前端调试配置
joyloveit的博客
04-22 2781
2、添加一个JavaScript Debug 类型的配置，用于调试；其中http://localhost:9527 指向页面启动的地址。默认使用Chrome浏览器。1、如图，添加类型为npm的配置；执行脚本内容为dev；这一步等同于用控制台终端手动执行 npm run dev；用于启动node服务器。三、先启动npm-service，再启动JavaScriptDebug，就可以调试了。二、idea->Edit Configuration。
idea中启动vue项目及前后端分离浏览器调试技术分享
donnie的博客
04-29 7313
开发工具idea，前端框架vue，需要安装node.js以及vue-cli； 一、在IDEA中配置vue插件 点击File–>Settings–>Plugins–>搜索vue.js插件进行安装，安装完成后重启idea。见图1： 图一 二、搭建node.js环境 安装node.js 可以去官网下载（https://nodejs.org/zh-cn/）：安装过程就很简单，直接下一步...
Webstorm08 Webstorm下调试Node
多啦的博客
07-06 659
在代码中打断点的方式和在chrome中是相同的，需要完成一些配置即可 首先点击菜单栏中的run→edit configuration 然后新建一个配置名，大部分都应该默认配置好的，没有配置好按照下图配置就行，需要注意的是Node parameters配置为--harmony来启用一些Node的新特性 还可以配置应用的环境变量： 配置完成之后，点击run里面的Run koa2就可...
idea自动编译vue
最新发布
02-12
### 配置 IntelliJ IDEA 实现 Vue 项目自动编译 为了使 IntelliJ IDEA 支持 Vue 项目的自动编译，需确保开发环境已正确配置并启用相关插件。 #### 安装必要的工具和依赖 在终端中通过 npm 命令来安装全局的 Vue CLI 工具[^3]: ```bash npm install -g @vue/cli ``` #### 启用自动编译功能 对于 HTML 和其他资源文件，在 Intellij IDEA 中默认情况下修改这些文件不会触发即时重新加载。要解决此问题，可以利用内置的 Live Edit 功能以及 WebStorm/Vue 插件的支持[^2]。 #### 设置 IDE 的构建过程 前往 `Settings/Preferences` 对话框 (可通过 Ctrl+Alt+S 快捷键访问)，导航至 `Languages & Frameworks -> JavaScript -> Webpack` 板块，确认 webpack 构建工具已被选中，并指向正确的配置文件路径(通常是 project_root_directory/webpack.config.js)[^4]。 #### 使用 Watch Mode 进行实时预览 为了让更改立即生效而无需每次都重启服务器，可以在运行应用时附加 `--watch` 参数或使用 nodemon 等监视器程序监听源码变动事件。如果采用的是 vue-cli-service serve，则该命令本身已经包含了 watch 行为[^1]。 #### 安装 Volar 插件增强支持 考虑到某些版本可能存在兼容性差异，建议尝试安装最新版的官方推荐插件 "Volar" 替代旧有的 "Vue.js"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值