Ionic+Vue项目中Vue配置存放及热重载禁用问题

我来帮你搞定在Ionic + Vue项目里禁用热重载，以及后续遇到的ESLint配置冲突问题：

一、正确禁用Vue热重载的姿势 #

你之前找到的vue-loader配置逻辑是对的，但在Ionic + Vue项目里不能直接硬写配置，因为Ionic已经封装了Webpack的配置链，得通过vue.config.js用正确的方式注入修改：

推荐方式：用chainWebpack修改（适配Ionic配置链） #

这种方法不会破坏Ionic默认的Webpack配置，更安全：

module.exports = {
  chainWebpack: config => {
    // 找到vue-loader的规则，修改hotReload选项
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.hotReload = false;
        return options;
      });
  }
};

备选方式：用configureWebpack直接扩展配置 #

如果习惯直接写Webpack配置，也可以用这种方式：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            hotReload: false
          }
        }
      ]
    }
  }
};

二、解决删除ESLint规则后的App.vue报错问题 #

你添加config.module.rules.delete('eslint');后出现报错，是因为直接删除ESLint规则会破坏Ionic默认的配置依赖，而且之前ESLint可能帮你掩盖了代码里的语法问题。这里有两个解决方案：

方案1：安全禁用ESLint（不删除规则） #

如果只是想关闭ESLint的实时检查，不要直接删除规则，改成在vue.config.js里配置：

module.exports = {
  // 关闭保存时的ESLint检查
  lintOnSave: false,
  chainWebpack: config => {
    // 禁用热重载
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.hotReload = false;
        return options;
      });
  }
};

方案2：必须删除ESLint规则时，先修复代码问题 #

如果一定要删除ESLint规则，先运行npm run lint（或yarn lint）查看具体的ESLint错误提示，比如未定义变量、语法不符合规范等，把这些问题修复后再运行ionic serve，就能解决App.vue的报错了。

三、为什么直接加webpack.config.js没用？ #

Ionic + Vue项目默认不会读取根目录的webpack.config.js，它的Webpack配置是通过官方的CLI插件管理的，所有自定义配置都必须通过vue.config.js注入，这就是你之前加了webpack.config.js却没效果的原因。

内容的提问来源于stack exchange，提问作者obe