解决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 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
Vue精简版风格概述
Jan 30 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
E路文章系统PHP
2006/12/11 PHP
PHP 裁剪图片
2021/03/09 PHP
广告显示判断
2006/08/31 Javascript
Expandable "Detail" Table Rows
2007/08/29 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
Python 读取位于包中的数据文件
2020/08/07 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
android面试问题与答案
2016/12/27 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
业务经理的岗位职责
2013/11/16 职场文书
小学毕业感言150字
2014/02/05 职场文书
文化宣传方案
2014/03/13 职场文书
在职证明书模板
2015/06/15 职场文书
导游词之无锡唐城
2019/12/12 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android