[iview/iview-admin]热更新不管用???

2018-09-28 989 views
1

OS: windows 10 node:8.12.0 yarn: 1.9.4 chrome:69

热更新没有起作用

浏览器控制台报错:

  1. [WDS] Disconnected!
  2. http://10.190.81.79:8080/sockjs-node/info?t=1538104119733 net::ERR_TIMED_OUT

image

没有使用 cnpm,不过 registry: 'https://registry.npm.taobao.org', package.json:

"scripts": {
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "clipboard": "^2.0.0",
    "codemirror": "^5.38.0",
    "countup": "^1.8.2",
    "cropperjs": "^1.2.2",
    "echarts": "^4.0.4",
    "html2canvas": "^1.0.0-alpha.12",
    "iview": "^3.0.0",
    "iview-area": "^1.5.17",
    "js-cookie": "^2.2.0",
    "simplemde": "^1.11.2",
    "sortablejs": "^1.7.0",
    "vue": "^2.5.10",
    "vue-i18n": "^7.8.0",
    "vue-router": "^3.0.1",
    "vuedraggable": "^2.16.0",
    "vuex": "^3.0.1",
    "wangeditor": "^3.1.1",
    "xlsx": "^0.13.3"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.0.0-rc.1",
    "@vue/cli-plugin-babel": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-plugin-unit-mocha": "^3.0.1",
    "@vue/cli-service": "^3.0.4",
    "@vue/eslint-config-standard": "^3.0.4",
    "@vue/test-utils": "^1.0.0-beta.10",
    "chai": "^4.1.2",
    "eslint": "^4.9.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-plugin-cypress": "^2.0.1",
    "eslint-plugin-prettier": "^2.6.2",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "lint-staged": "^6.0.0",
    "mockjs": "^1.0.1-beta3",
    "prettier": "1.14.3",
    "style-resources-loader": "^1.2.1",
    "vue-template-compiler": "^2.5.13"
  },

vue.config.js:

 chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
      .set('_conf', resolve('config'));

    // 解决无法热更新(HMR)的问题
    config.resolve.symlinks(true);

    // 自动化导入文件 (用于颜色、变量、mixin……)
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)));
    return config;
  },
  css: {
    extract: false// 需要热更新此处设置成false
  },
  // 打包时不生成.map文件
  productionSourceMap: false,
  // 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为 '' ,即空字符串
  devServer: {
    watchOptions: {
      poll: true
    },
    proxy: 'http://localhost:8080',
    public: '10.190.81.79:8080'
  }

网上能用的方法都试了,还是不行

回答

6

image 目前我是这样配置才可以支持热更新,直接写域名或者IP就不行。你可以先这么配置用着0.0

8

终于解决了,感谢 @spencer-live

// 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为 '' ,即空字符串
  devServer: {
    hot: true, // 开启热点
    inline: true, // 开启页面自动刷新
    compress: true, // 一切服务都启用gzip压缩
    // progress: true, // 显示打包的进度
    useLocalIp: true, // 允许浏览器使用本地 IP 打开
    disableHostCheck: true, // 允许使用host配置访问
    host: 'localhost',
    port: 8080
    // watchOptions: {
    //   poll: true
    // }
    // proxy: 'http://localhost:8080',
    // public: '10.190.81.79:8080'
  }