解决vue热替换失效的根本原因


Posted in Javascript onSeptember 19, 2018

新手刚开始使用vue时,常会遇见一个坑,那就是热替换失效。

什么?你跟我说使用官方的vue-cli去构建,我就是使用vue-cli后突然失效。

什么?你跟我说重新npm run dev一下,好嘛,已经run了N次了依然没回到大路上。

经过在网上一番查找,发现基本没有这个问题的详解,可能是这个问题太低级了?

讲解一下热替换的原理:热替换是在执行npm run dev后,会启动一个本地服务器(webpack-dev-server),这个服务器会观察源代码编译出来的文件。一旦修改了源代码,就会立刻编译源代码,然后观察新编译后的文件,接下来替换。

为什么会有编译这个以过程,就是因为使用.vue开发时,浏览器不认识这种类型的文件,需要编译成js文件。

所以整个过程可以这样描述:

源代码 ---> 编译为目标代码(浏览器可以识别运行的代码) ---> 本地服务器观察目标代码 ----> 本地服务器接收到目标代码改变[事件] ----> 刷新浏览器

常见热替换失效导致的原因:

1.观察文件位置错误

{

env: require('./dev.env'),
 port: 8080,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',//必须
 assetsPublicPath: '/',

失效是为什么?是因为修改了源代码后,依然会立刻编译,但是通常被观察的新编译的文件位置错了。也就是说浏览器显示的东西与服务器观察的东西是一个位置,而编译出来文件是另外的位置。

解决办法是:config/index.js中 dev的这个参数必须为static

2.项目目录包含特殊字符

像这样的路径 D:\(myworkspace)\vue-answer-project

这种目录中有一个括号!!!就有可能在浏览器中打开后,发现console报错

http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING

这是什么意思呢?就是热替换模块报错,中断了观察页面与热替换模块的链接,无法收到事件。

解决办法就是:去掉这样的路径

3.npm run build后,打开浏览器一片空白

这个位置是根据文件webpack.config.js中的publicPath进行指定的。也就是服务器观察位置是 publicPath: "XX/build.js"这里面的 /XX/build.js这个文件,这个文件需要你在文件 index.html中 正确引入。

// webpack编译输出的发布路径
// => 将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包(npm run build)之后,
// 外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)
module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',
 productionSourceMap: true,
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
 },
 dev: {
 env: require('./dev.env'),
 port: 8081,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {},
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: true
 }

解决办法是:在上图中的build.assetsPublicPath的值 改为 "./"

以上这篇解决vue热替换失效的根本原因就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
三种Webpack打包方式(小结)
Sep 19 #Javascript
Vue.js更改调试地址端口号的实例
Sep 19 #Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 #Javascript
vue中的计算属性实例详解
Sep 19 #Javascript
Vue axios设置访问基础路径方法
Sep 19 #Javascript
json前后端数据交互相关代码
Sep 19 #Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 #Javascript
You might like
社区(php&&mysql)二
2006/10/09 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
Smarty模板配置实例简析
2019/07/20 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
JavaScript中的字符串操作详解
2013/11/12 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
原生JS轮播图插件
2017/02/09 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
python写入已存在的excel数据实例
2018/05/03 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
简单了解python的内存管理机制
2019/07/08 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
详解python tcp编程
2020/08/24 Python
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
Python的两道面试题
2013/06/29 面试题
学习演讲稿范文
2014/05/10 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
毕业设计论文评语
2014/12/31 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
党员身份证明材料
2015/06/19 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL