Ionic+Vue项目中Vue热重载禁用配置位置咨询

我来帮你搞定这个问题——在Ionic + Vue的项目里，直接照搬vue-loader的原生webpack配置肯定行不通，因为Ionic是基于Vue CLI构建的，得用Vue CLI专属的链式配置方式来修改webpack规则。

一、正确禁用Vue热重载的配置 #

你不需要手动创建webpack.config.js，直接在项目根目录的vue.config.js里通过chainWebpack来修改vue-loader的选项即可，具体代码如下：

module.exports = {
  chainWebpack: config => {
    // 定位到vue-loader的规则，禁用热重载
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.hotReload = false;
        return options;
      });
  }
}

这种方式是Vue CLI官方推荐的修改loader配置的方法，能确保你的设置被正确注入到Ionic的webpack构建流程里。

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

你提到添加config.module.rules.delete('eslint');后出现了App.vue的报错，这是因为直接删除ESLint规则会破坏webpack对.vue文件的处理链——ESLint规则原本是和vue-loader配合，对.vue文件的脚本部分做语法检查的。如果要禁用ESLint，更稳妥的方式不是删除规则，而是用以下两种方法：

方法1：直接关闭开发时的ESLint检查 #

在vue.config.js里添加lintOnSave: false，彻底关闭开发阶段的ESLint自动检查：

module.exports = {
  lintOnSave: false, // 关闭ESLint实时检查
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.hotReload = false;
        return options;
      });
  }
}

方法2：若坚持删除ESLint规则 #

如果你一定要删除eslint规则，需要确保vue-loader的处理链依然完整，建议在删除后重新确认vue-loader的规则配置，但这种方式容易引发未知问题，更推荐用方法1来实现需求。

验证配置生效 #

修改完vue.config.js后，重启ionic serve命令，热重载功能就会被禁用——修改代码后页面不会自动刷新，需要手动刷新才能看到变更。

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