Vue-cli 的热更新无效问题

我使用vue init webpack-simple ProjectName创建了一个简单的Vue-cli工程,但是无法实现热更新。每次一点点改动就需要重新编译运行才能看到效果,十分困扰。
我的webpack配置如下:

const path = require('path')
const webpack = require('webpack');
console.log(path.resolve(__dirname, './src/main.js'))

module.exports = {
  //热部署
  entry:[
    path.resolve(__dirname, './src/main.js'),
    'webpack-dev-server/client?http://localhost:8080/',
  ],
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {  //这里可以配置端口号
//  port:8080,
//  host: 'localhost',
    //重定向404
    historyApiFallback: true,
    noInfo: true,
    //编译出错的时候,在浏览器页面上显示错误
    overlay: true,
    hot:true,
    inline:true,
    //该目录不填默认是项目目录
//  contentBase: path.resolve(__dirname),
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
    //配置webpack插件
  plugins:[
      //热加载插件
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

package.json如下:

{
  "name": "srms",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Snile <826245622@qq.com>",
  "license": "",
  "private": true,
  "scripts": {
    "clean": "rd /s /q dist",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "dev": "npm run build && cross-env NODE_ENV=development webpack-dev-server --open --inline --hot"
  },
  "dependencies": {
    "vue": "^2.5.11",
    "vue-router": "^3.0.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^14.2.3",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.1"
  }
}

该配置似乎能检测到文件的变化,每次改动后,控制台都会输出:
client:77 [WDS] Hot Module Replacement enabled.
2client:80 [WDS] App updated. Recompiling...
client:223 [WDS] App hot update...

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
lua文件热更新无效和资源热更新无效的问题
热更无效
Flutter 热更新无效问题
Error connecting to the service protocol: Exception: Attempted to connect to Dart observatory 5 times, and all attempts failed. Giving up. The URL was ws://127.0.0.1:8111/ws 如果运行后输出 Log 是这样,同时使用了代理,...
VUE-CLI脚手架热更新没有效果
在开发中使用VUE-CLI脚手架构建项目后,使用webstorm进行开发时,偶尔会出现修改后的页面没有及时reload. 我们需要在webstorm取消勾选stystem settings下的use save write”。1、进入偏好设置2、修改配置3、保存修改即可
关于VUE-CLI脚手架热更新不起效的原因
学习VUE的过程中用VUE-CLI脚手架搭建时偶然发现热更新失效了, 在网上找解决方案有提到webstrom的safe wirte的原因,但并不能解决我的问题, 经测试发现某些目录可以某些目录不可以,后来查出是因为目录名中带有小括号,改了目录名之后问题解决, 其它符号不知道会不会也会出现这种情况,在这里记录一下
使用vue-cli搭建简单的vue+webpack热更新项目
近年来,前端的发展速度惊人的快,要想跟上前端的进军速度,每时每刻都要学习。各种框架开发是相当流行,今天,带大家使用vue-cli搭建简单的vue+webpack热更新项目。 准备工作:你的电脑要安装node(自带npm),这一点就不多说了,作为前端必备,哈哈。 第一步:使用npm全局安装webpack和vue-cli(如果安装速度慢,可以使用cnpm淘宝镜像安装,直接百度就有) $ npm ...
解决vue-cli在ie9+中无效的问题
1.ie9+报错vuex requires a Promise polyfill in this browser. 解决如下:   npm install --save-dev babel-polyfill       或者 cnpm install  babel-polyfill -D   修改 webpack.base.conf.js   将: entry: {      
webpack热更新无效解决,页面无刷新
问题:控制台输出, 但页面内容并没有进行热加载 [WDS] App updated. Recompiling... [WDS] App hot update... ... 报错:  Error: Cannot find module 'webpack-cli/bin/config-yargs' at Function.Module._resolveFilename (intern...
RN Pushy热更新 调用markSuccess无效
RN Pushy热更新 调用markSuccess无效 最进在研究ReactNative的热更新,首先选择的就是原生组件Pushy。 这是我最进的研究: RN热更新之Pushy---iOS 官方文档写的很详细,简单易懂。 但是还是遇到了一些问题: ios热更新之后,双击home键,结束进程再开启会回到更新之前的版本。 研究了好久,网上这方面的教程也很少,不过在中文网社区上还是有一些教...
vue-cli项目中,rouer-link点击后无效
【已解决】 昨日,重构我的vue-cli项目,但是在使用router-link时发现,无论如何点击其都不起反应。 症状: 鼠标左键点击无效 鼠标移上后,(谷歌)浏览器左下角正常显示链接网址 网页解析正常,&lt;routetr-link&gt;标签被解析成了a标签,且与正常a标签无异 console中无异常 鼠标中建点击(新页面打开)能够正常打开其对应的网页 相...
热更新
虽然有插件开发,但热更新少不了。 当我们需要更新插件的时候使用的是插件开发,当我们需要更新宿主程序就需要使用热更新 热更新使用框架bsdiff和bzip2 我们需要在服务端使用新版apk和旧版apk生成差分包,由于服务端在windows下,所以生成动态文件(dll) 通过寻找bsdiff的入口函数在bsdiff.cpp中在,因为截止到现在我主要了解了一点c,所以把bsdiff.cp
Android热更新之so库的热更新
声明:本篇文章禁止转载,原创地址:http://blog.csdn.net/sbsujjbcy/article/details/51475499【区长原创】 本来想写资源的热修复的,虽然方案差不多已经完成了,但是考虑到一些敏感问题,资源修复就不写了。那就来写写so的热修复,其原理和class的修复是一样的,但是so的热修复的需求并不高,就当做学习吧。首先来总结一下Android的ClassLoade
热更新总结--冷启动热更新
本文章主要根据阿里出的《深入探索Android热修复技术原理》后的个人总结   一、为什么直接补丁类直接导入到补丁包中,运行类加载时会产生异常并退出? 首先,因为dex加载到本地内存时,如果不存在odex文件,那么首先会执行dexopt,其中 if(doVerify){     if(dvmVerifyClass(class)){         ((DexClassDef*)pCla...
vue-cli—vue-cli安装和启动
$ npm install -g vue-cli $ vue -V 2.9.6 $vue init webpack vue-exp 可以一直走 然后进入项目根目录 大致认识一下webpack
react-native热更新闪屏问题
react-native热更新闪屏问题运行环境1.react-native-cli: 2.0.02.react-native: 0.38.03.react-native-update-cli: 0.1.04.react-native-update: 4.0.1(本次热更新是针对react native中文网的热更新,给出中文网热更新的地址详细步骤:https://github.com/reactna
Lua热更新问题
Lua热更新后无法加载json文件 公司最近游戏进行大幅更改,需要热更新功能。测试热更新时发现一个很严重的问题。ios热更完成后无法打开新增的页面,打开就崩溃。作为一个cocos菜鸟开始了摸索之路,期间遇到了各种挫折,求助大神才搞定。 首先崩溃的时候,跟ios联调看了一下日志,没发现什么特殊异常,开始以为是下载文件路径有问题导致无法打开文件,仔细核对了热更后的文件路径,没有发现什么问题,尝试打...
MEF热更新生效问题
发帖问过此类问题,按照P哥的思路,MEF进行热更新是没有问题的,但是现在遇到的问题是插件加载时将插件复制到缓存目录加载,加载完成后,原目录内dll更新之后,重新将新插件复制到新缓存目录加载,但是依旧是执行原先插件,如果插件目录里添加新插件,重新加载之后新插件生效,之前加载过的插件依旧未更新,只有重启软件后才会更新。rnrn
webpack-dev-server的热更新问题
webpack配置如下  目前dist下面的bundle.js是webpack打包的, 但是热更新所引用的bundle.js虽然名字一样,但是并不是看到的那个bundle.js,而是在当前路径下不可见的一个bundle.js 下面实验,证明index.html引用的不是可见的bundle.js 可以看到index.html下面没有bundle.js但是引用成功了  说...
python热更新的问题
在一个游戏中,想在不关闭游戏的情况下,更改游戏中的一些参数,这个该怎么做?,看网上有reload这种,不知道具体该怎么用
vue-cli3+webpack热更新失效问题
1、起因 A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3热更新失效、vue histroy 模式热更新失效,网上看到不少方法,npm重新安装,不要用淘宝镜像cnpm安装;npm安装yarn,再用yarn重新install,yarn serve启动,在npm run serve 启动等方法都不好用。github有类似问题https://github.com/vuejs/vue-...
cocos3.3 无限热更新问题
今天碰到的,每次进应用都会更新。查得原来3.3在热更新的时候会先对比远程版本和本地版本,如果本地安装包版本大于远程版本就会删掉本地热更新的目录,这就造成了每次重新登录都会更新的错误。。。
vue-cli打包遇到的问题
1.首页空白 在打包时需要使用相对路径来处理静态资源,更改build中资源发布路径配置(config/index.js, build对象) 解决:修改config目录里面的index.js文件 将 build里的assetsPublicPath: ‘/’ 改为 assetsPublicPath: ‘./’ 2.static下静态资源图片找不见 原因:在引用的图片路径为”/static/i...
vue-cli 3.0遇到的问题
新安装husky,导致git的hooks没有被覆盖问题 之前使用husky,为了捕捉到commit。 后来不管怎样写precommit都不行 &quot;scripts&quot;: { &quot;precommit&quot;: &quot;vue-cli-service lint --no-fix &amp;amp;&amp;amp; git add .&quot; } 解决方法:把.git里面的hooks文件夹删了,重装husky(可以...
安装vue-cli遇到的问题
在安装vue-cli遇到如下这个问题: 这个no such file or directory 产生的原因应该是网络问题,使用cnpm解决。
vue-cli打包路径问题
直接用vue-cli生成的项目打包直接放到服务器上,css,js都会存在路径问题,还有css背景图路径,原因是默认打包生成的路径为根路径,相对与服务器的,因此需要分别设置一下。 1.文件的路径不正确:在config目录下的index.js里build对象的assetsPublicPath改为‘./’; 2.背景图片路径找不到:在build文件夹里的&quot;utils.js里面的...
VUE-CLI 3.0 代理问题
rn业务场景:前后台分离 后台用的是JAVA 一开始为了解决跨域问题 使用了VUE 代理解决问题,如图:rn[img=https://img-bbs.csdn.net/upload/201903/06/1551866711_232349.png][/img]rnrn现在遇到个情况就是 前端可能会访问多个后台服务器, 但是代理指向的是最初的那台,于是访问其他服务器的时候 跨域的问题又出现了。rn通过修改后台配置 ,解决了跨域问题 。rn现在我想尝试下 是否能够通过配置 vue.config 而不是修改后台JAVA代码 解决问题。rn网上已经查阅了很多,都是针对开发环境和生产环境区分代理(这在启动项目的时候就指定好了),而不是多代理rn另外还看到了很多proxyTable的配置,VUE-CLI 3.0基础配置似乎都封装好了,只能通过vue.config.js 修改默认配置,所以不是很清楚rnproxyTable应该加在哪里rnrn问题差不多就是这样 ,求有木有大佬知道如何解决麻烦告诉下小弟rnrn
vue-cli创建项目的loader问题
vue-cli创建的项目,解决loader报错问题
vue-cli打包问题
关于npm run build打包问题 在项目中使用vue-cli脚手架搭,由于实际项目问题,与自定义安装的项目目录略有差异。 自定义安装的项目是:test => src => 源码 也就是在test项目下,安装node依赖,进入src下,是项目的源码部分。 然后实际项目部分是,test2 => src => vue1、vue2 在src目录下是真正的项目部分,
vue-cli 遇到的问题
1:切换子路由时,数据不刷新,在子路由进入时,观察watch 代码: watch:{ '$route'(to,from){ const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length console.l
layui + vue-cli遇到的问题
最近在使用layui+vue,碰到了挺多问题,总结一下 1.模块的加载路径问题 刚开始的时候我在main.js里只引了这两句 但使用layui.use('form', callback)将时就会报模块没有加再进来的错,很奇怪, 然后解决办法就是根据缺失的模块,对应的引入,比如form,再加这么一句 import '../node_modules/layui-src/src/l...
vue-cli安装出错问题
错误:PS C:\WINDOWS\system32&amp;gt; npm install vue-cli -g npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to &quot;coffeescript&quot; (no hyphen) npm ERR! code EINTEGRITY npm ERR! sha1-psC74f...
Vue-cli项目部署问题及解决方案
1.css样式问题: 项目在开发模式(dev)时样式渲染正确,但执行npm run build时会出现生产模式样式与开发模式样式不一致的问题,具体包含如下两部分问题。 (1)字体静态文件路径问题 在执行build后,我们会在项目的dist文件夹内获得index.html和static文件夹两部分,其中static文件夹中保存了项目依赖的各种静态文件,但在运行时会发现,字体文件fonts在引用...
vue-cli打包发布的问题
vue-cli的项目开发完成后,发布前将进行打包工作,项目文件夹执行npm run build将vue框架编写的程序转换为最基础的html,css,js等。转换过程中本人遇到了一些问题,整理记录下: 生成文件的引号被省略问题: 设置build/webpack.prod.conf.js的属性removeAttributeQuote:false html引用路径为绝对路径问题: 修改confi...
vue-cli axios 加载顺序问题
搭了一个vue-cli前后分离的框架 访问后台接口用了axios,这是异步的,如果加载完data中的数据再访问接口,是没问题的,可是如果data数据还没加载完,就已经访问完了后台,就会有问题。 解决方法:this.$nextTick() 将回调延迟到下次 DOM 更新循环之后执行。 dataList () { this.$ajax.get('/user/user/menu/l...
vue-cli相对路径问题
index.vue文件中 &quot;./a.jpg&quot;  index.vue目录下的文件 &quot;../a.jpg&quot;  index.vue上级目录下的文件 &quot;../../a.jpg&quot;  index.vue上级的上级的目录下的文件 以此类推
xLua热更新
1、作者教程:http://www.gad.qq.com/article/detail/24967 2、GitHub地址:https://github.com/Tencent/xLua       下载之后只需要把Plugins、XLua两个文件夹导入到Unity3D的Assets目录下就可以了。可以按照XLua文件夹下的XLua教程进行学习(如下图) 001-利用XLua在控制台
devtools热更新
pom &amp;lt;dependency&amp;gt; &amp;lt;groupId&amp;gt;org.springframework.boot&amp;lt;/groupId&amp;gt; &amp;lt;artifactId&amp;gt;spring-boot-devtools&amp;lt;/artifactId&amp;gt; &amp;lt;scope&amp;gt;runt...
cordova热更新
cordova 热更新: 一、添加插件  1、新建Cordova项目 1 cordova create CordovaHotCode com.ezample.hotcode 2、添加Android平台  在新建项目的根目录下,进入命令行, 1 cordova platform add android 3、添加...
android 热更新
热更新的产生 热更新流程 主流热更新框架 android类加载机制 热更新原理 热更新的产生 线上版本出现严重的bug,需要重新发版。热更新能快速的解决线上问题,不需要重新发版。 热更新流程 线上检测到严重的crash 拉出一个新的分支来修复线上问题 开发人员自测,项目测试人员测试,然后jenkins构建和补丁生成 app通过推送或者主动拉取补丁文件 把修复的代码同步到mas...
Andfix热更新
Method 'void com.meidalife.map.BaseMapActivity.onCreate(android.os.Bundle)' is inaccessible to class 'com.meidalife.powerblue.activity.MainActivity_CF' (declaration of 'com.meidalife.powerblue.activit
Unity热更新
Unity热更新以下方案我只在android平台上测试,其他平台我还没有试过。 关于unity资源热更,官方有成熟的方案,就是大家熟悉的assetbundle。 但是关于脚本的热更,网上有好几种方案,不过都有很多局限性。but,需求是无止境的。我们的需求就是所有资源全部做成下载的。包括so! 熟话说,有压迫就有反抗,于是我为了响应产品的号召,整理出了一个方案!主要支持: 1、所有的so和资源
相关热词 c# 线程结束时执行 c# kb mb 图片 c# 替换第几位字符 c#项目决定成败 c# 与matlab c# xml缩进 c#传感器基础 c#操作wps c# md5使用方法 c# 引用父窗口的组件