Nuxt 中结合i18n动态导入对应语言本地JS文件报404错误求助

你碰到的异常本质是两个机制叠加触发的，和文件路径本身存在与否无关：

• asyncData执行阶段不存在组件实例的this上下文
  Nuxt的asyncData是在组件实例初始化之前运行的钩子（服务端渲染阶段、客户端路由跳转阶段均是如此），这个钩子内不存在组件实例绑定，代码里写的this.i18n.locale根本没有可解析的上下文。
  之所以没有直接抛出“this为undefined”的报错，是因为webpack在编译期会对动态import()的路径做静态分析：它识别到${this.i18n.locale}这个动态片段是无法提前求值的表达式，会把这个片段归类成不可识别的上下文模块，等运行时把这些无法求值的对象拼入路径字符串时，就会被序列化成连续的[object Object]，最终生成你看到的全是[object%20Object]的异常访问路径。
• i18n实例的注入位置和你的取值方式不匹配
  @nuxtjs/i18n模块的语言状态，是直接挂载在asyncData的运行时上下文对象上的，并不会挂载在组件实例的this上，哪怕你能正常访问this，也拿不到对应的locale值。

只需要调整两个点就能正常运行：

• 从asyncData的入参里直接解构获取i18n实例，不要通过this访问
• 保证动态import的路径有足够的静态前缀，让webpack能正确生成路径匹配规则

修正后的可运行代码示例：

async asyncData({ route, error, i18n }) {
  try {
    const currentLocale = i18n.locale
    const entry = await import(
      /* webpackInclude: /\.js$/ */
      `~/assets/data/${currentLocale}/portafolio/${route.params.work}.js`
    )
    return { entry: entry.default || entry }
  } catch (error_) {
    error({
      message: 'Not Found',
      statusCode: 404,
    })
  }
  return {}
}

补充说明：之前单语言版本能正常运行，是因为动态片段只有从入参解构拿到的route.params.work，webpack可以静态识别到这是文件名层面的动态匹配，能正确对应到~/assets/data/portafolio/目录下的所有js文件，不会生成异常的路径解析规则。如果调整后仍有路径匹配异常，可以在动态import的注释里补全webpackInclude规则，明确告诉webpack需要匹配的文件范围，避免把全链路目录的上下文都纳入打包扫描范围。

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