[JavaScript知识库]vue之vue-cli4热更新

vue之vue-cli4热更新

• 下载：
  • yarn add --save-dev webpack-dev-server

vue.config.json

var path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: config => {
    // config.resolve.symlinks(true);
  },
  devServer: {
    hot: true, //自动保存
    open: true, //自动启动
  }
}

package.json

  "scripts": {
    "server": "live-server ./ --port=9090",
    "dev": "vue-cli-service serve && webpack-dev-server NODE_ENV=development --mode dev --open --hot",
    "build:test": "vue-cli-service build --mode test",
    "build:stage": "vue-cli-service build --mode stageing",
    "build:prod": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

注意点

      <keep-alive :include="cache_tab_menu">
        <!-- 不同路由应用了相同的vue组件 key->router-view上加上唯一值  -->
        <!-- <router-view :key="key" /> 注意点：添加了 key值 会导致热更新失效 -->
        <router-view />
      </keep-alive>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖