解决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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
Js 随机数产生6位数字
May 13 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
redux-saga 初识和使用
Mar 10 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
vue路由教程之静态路由
Sep 03 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
vue 导出文件,携带请求头token操作
Sep 10 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
我的论坛源代码(四)
2006/10/09 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP7新特性
2021/03/09 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
摘自启点的main.js
2008/04/20 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
jQuery事件用法详解
2016/10/06 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python 反向输出字符串的方法
2018/07/16 Python
python实现汽车管理系统
2018/11/30 Python
Python变量访问权限控制详解
2019/06/29 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
高中生学期学习自我评价
2014/02/24 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python