vue3路由history问题报错： ERROR Invalid options in vue.config.js: “base“ is not allowed npm ERR! code

---

报错内容

1.页面跳转白屏
2.页面刷新报错

ERROR Invalid options in vue.config.js: “base” is not allowed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! thgj-device-monitoring-web@0.1.0 serve: vue-cli-service serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the thgj-device-monitoring-web@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xuhui\AppData\Roaming\npm-cache_logs\2025-01-13T03_23_43_363Z-debug.log

main.js:14 Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs.org/feature-flags.

解决方法

1.在路由中添加内容（router.js / router.ts / router.index）

const router = createRouter({
  history: createWebHistory('/'),
  // history: createWebHistory(process.env.BASE_URL),
  scrollBehavior: () => ({ y: 0 }),
  routes: routes
});

2.给路由添加报错回调（router.js / router.ts / router.index）

router.onError((error) =>{
 
  // 这里的正则表达式可以根据实际情况下js命名来进行修改,“ (\d)+  ”只匹配数字

  const pattern =/Loading chunk (\d)+ failed/g;

  const isChunkLoadFailed = error.message.match(pattern);

  const targetPath = router.history.pending.fullPath;

  if(isChunkLoadFailed) { 

       router.replace(targetPath);

   }

})

3.在vue.config.js中添加配置

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  publicPath: '/', // 移除 base 配置项，只保留 publicPath

  transpileDependencies: true,
  runtimeCompiler: true,
  lintOnSave: false,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: []
    }
  },
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      });
      return definitions;
    });
  },
  devServer: {
    historyApiFallback: true, // 启用此选项以处理前端路由
  }
});

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。