解决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 相关文章推荐
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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/08/08 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP递归算法的简单实例
2019/02/28 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
python处理csv数据的方法
2015/03/11 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python regex库实例用法总结
2021/01/03 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
美国宠物商店:Wag.com
2016/10/25 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
毕业生大学生活自我总结
2014/01/31 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
学生安全责任书模板
2014/07/25 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
老干部工作汇报材料
2014/10/28 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL