vue编译后调试源码

❶ 如何在WebStorm 2017下调试Vue.js + webpack

有人觉得vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。所以vue+webpack调试要从webpack入手。我们先从一般情况开始说。-sourcemapwebpack配置提供了devtool这个选项，如果设置为‘#source-map’，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。devtool:'#source-map'然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择:戳这里devtool介绍这里不同的配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章官方默认的是用‘#cheap-mole-eval-source-map’devtool:'#cheap-mole-eval-source-map'设置好之后，在vue项目调试的时候，代码里面标注debugger的时候就能看到对应的代码了，非常方便。debugger或者，直接找到对应的文件。在chrome用’ctrl(command)+p‘，输入文件名，可以找到对应的源代码。command+p打断点：断点需要注意的是，这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。-vue-clivue家的项目脚手架，推荐使用。vue-cli老家在这里vue-cli可以帮我们自动搭建项目，首先npm全局安装npminstall-gvue-cli然后创建一个新的项目vueinitwebpackmy-project一路回车，搞定。(配置项请参考上面给出的vue-cli链接)这里从网上下载了一个带webpack的vue项目(跑之前记得npminstall一下)vue-cliwebpack从bulid文件夹里面就大概能看出：•webpack.dev.conf:开发模式用•webpack.prod.conf:生产模式用其中，开发模式提供了devtool为’#cheap-mole-eval-source-map’，生产模式根据config文件夹下的proctionSourceMap变量控制是否使用。若为true，则devtool为’#source-map’其他使用方法一致。非常方便。线上调试平时开发的时候，我们用webpack的热加载，可以省去挂载调试的步骤，非常方便。但是发布后部署到服务器上，就失去了这个本地优势。如果使用挂载文件方式会比较麻烦。由于webpack打出来的文件有版本号这些信息，而且发布一个包看代码量可能需要等待不等，这个方案不实际。但是如果挂载的是热加载到端口下的文件的话，这个问题就很好了。-热加载在此之前，先来分析一下webpack的热加载原理。对项目抓包可以发现这么一个文件：__webpack_hmr__webpack_hmr这是webpack热加载的服务器推送事件，eventsource类型，功能和websocket有点类似。大致作用是建立一个不会停止的stream流链接，服务器发送更新数据回来append到流的末端，前端读取最新append的数据，然后动态的更新页面上的东西。接下来我们观察下上文提到的更新数据有哪些。随便更新一个文件，触发热加载，再抓个包，发现有两个.hot-update.json和一个.hot-update.js文件热加载更新文件这些具体做了些啥我不知道，这里就不深究了。应该是根据json里面的数据，达到一个准确更新的效果。所以热更新其实就是监听服务器上的数据，有修改的话服务器发送数据过来，前端把数据拿来后替换到页面上这么一个过程。-AutoResponder接下来谈谈线上挂载测试，这里推荐一款软件：fiddlerfiddler有一个功能叫做AutoResponder，它可以将一个地址指向另一个地址。之所以用这个软件，是因为它能匹配正则，非常方便。AutoResponder上一节说到，webpack热加载用到了这几类文件•__webpack_hmr•xxxxxxxxxxx.hot-update.json•xxxxxxxxxxx.hot-update.js

❷ 安装好vue devtools后,运行程序打开调试,vue里面空白

1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为速度和稳定性都比较好） 2、在目标文件夹下打开终端 3、执行cnpm install vue-cli -g 全局安装 运行vu

❸ vue: WebStorm设置快速编译运行的方法

WebSorm是一款优秀的前端开发工具，而Vue项目可以使用Node进行编译运行，平常我们可以通过命令行部署项目进行调试。
本文介绍设置Webstorm进行快速部署Vue项目。
第一步
点击启动快捷按钮旁边的向下小箭头，在列表中选择Edit选项：
第二步
打开启动设置页面后，点击左上角的加号添加新的运行方式：
第三步
在弹出的选择框中，选择node.js启动模式：
第四步
在新打开的设置页面中，在红色圈中的地方设置如图路径的文件：
至此设置成功，直接点启动按钮就可以部署项目。
以上这篇vue:
WebStorm设置快速编译运行的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:webstorm添加*.vue文件支持webstorm添加vue.js支持的方法教程webstorm中vue语法的支持详解webstorm和.vue中es6语法报错的解决方法详解Webstorm
新建.vue文件支持高亮vue语法和es6语法

❹ 怎么保存这个网站的源码这个是vue写的模版，我想把这个源码导出来，反编译vue源码

反编译需要js.map文件；一般部署的时候回删掉

❺ 如何用intellij idea调试vue

3种调试方式

1、WebStorm + Chrome

在WebStorm中启动调试时，WebStorm会根据你设置的url，自动打开新的Chrome浏览器进程访问这个设置的url，而且这个浏览器页面和你平常看到的浏览器差异会比较大，看不到书签栏，也看不到先前所装的所有插件。

2、Visual Studio Code调试

Visual Studio Code + Chrome 也可以调试，也能支持在Visual Studio Code源代码处加断调试，当代码执行流运行到这个地方后，也会中断暂停运行，并在调试窗口显示本地变量的值以及堆栈，还可以在Debug Console里执行表达式。

3、Chrome直接调试

在Chrome中也可以打开调试窗口，找到source，然后在源代码处打断点，当代码执行到断点处也会暂停执行，然后有一个很小的窗口显示环境变量的值。

(5)vue编译后调试源码扩展阅读

准备环境：

1、在chrome中安装插件 JetBrains IDE Support (古月: 实际测试, 不需要该插件也行)

2、创建demo项目 vue init webpack vuejs-webpack-project

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

❻ Vue源码里函数声明这样写是什么语法 test

中是否声明了abc()函数原型，然后test.c中使用#include "路径名/fish.h"来包含它，注意，不能使用#include <fish.h>，因为前者是告诉编译器到你指定路径去搜索fish.h文件，后者是告诉编译器在系统的标准头文件路径去搜索fish.h文件，所以用后边的形式时，编译器找不到这个头文件。
另外，你这个问题应

❼ 现在想让Vue在调试时候,对Vue环境配置应该如何设置。如何改变Vue环境的端口

一般是在webpack当中配置。
可以直接搜索你当前的端口号，找到相应的文件，进行修改后重新启动，就可以看到端口号的改变了。

❽ Vue正式上线项目都是编译之后的吗

对，都是编译后的，就像后端，也是编译后的

❾ vue编译后的js和map文件修改不了吗

无法还原，编译后的js为压缩文件，很多代码都不存在了

❿ 慕课网上没搜到vue源码，有没有课程透彻分析Vue 源码的

有，你在实战里找是huangyi讲的，印象中是从 Vue 的跨平台编译入手，从 Vue 的几个核心能力开始分析Vue 源码。 Vue 的静态全局 API 与属性， Vue 的响应式原理，异步组件、组件化、diff 算法等等方面，都是进行了详细的分析，最后还附带了vuex和vuerouter。