解决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 相关文章推荐
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
js微信分享接口调用详解
Jul 23 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 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求最大子序列和的算法实现
2011/06/24 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
html读出文本文件内容
2007/01/22 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
vue跨域解决方法
2017/10/15 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
OpenCV 边缘检测
2019/07/10 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
python开发入门——set的使用
2020/09/03 Python
如何查看python关键字
2021/01/17 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
大学生村官工作感言
2014/01/10 职场文书
晨会主持词
2014/03/17 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014年工程工作总结
2014/11/25 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
基石观后感
2015/06/12 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL