1分钟搞定vue-cli热更新问题

812 阅读1分钟

公司的新项目一直不能热更新,手写的代码保存后还要再手动刷新浏览器才能看到效果,实在太不智能了,今天找了下解决方法。

1.首先检查安装vue-cliwebpack-dev-server

2.在项目的根目录里找到vue.config.js文件,往里添加一段配置,如下:

module.exports = {

  devServer: {

    hot: true, // 开启热更新

    port: 8080 // 设置端口号

  }

}

3.最后找到`package.json`文件,修改里面的`scripts`部分,将`serve`命令替换为`vue-cli-service serve` 如下:

"scripts": {

  "serve": "vue-cli-service serve"

}

4.运行`npm run serve` 命令启动项目,此时已经可以热更新了。