1. 背景:升级webpack5 + 使用vuex
  2. 报错信息:[vuex] duplicate getter key:****
  3. 关键代码:vuex中根据文件目录划分模块进行引入时使用到require.context
const files = require.context('./apaas-ide', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default {
  modules
}
  1. 问题原因:webpack5中require.context方法使用出现变化,如代码中使用将同时识别绝对路径与相对路径的文件并生成两份同名的模块文件导致报错
  2. 解决
const files = require.context('./apaas-ide', false, /\.\/.*\.js$/) // 修改正则表达式过滤绝对路径
const modules = {}

files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default {
  modules
}