Vue Storefront Nuxt集成Odoo后$i18n未定义报错求助

问题背景 #

通过npx @vue-storefront/cli generate store创建集成Odoo的Vue Storefront Nuxt.js项目，配置.env后执行yarn和yarn dev，先后遇到两个错误：

1. ES模块加载错误：提示必须使用import加载@glidejs/glide的ES模块
2. 修改nuxt.config.js的transpile配置后，出现TypeError: Cannot read property '$i18n' of undefined

环境版本：

• node v14.20.1
• npm 6.14.17
• Nuxt v2.15.8
• yarn v1.22.19

一、解决@glidejs/glide ES模块加载错误 #

Nuxt 2默认基于CommonJS模块系统，而@glidejs/glide的新版本可能为纯ES模块，导致加载冲突。通过以下配置修复：

1. 在nuxt.config.js的build字段中添加@glidejs/glide到transpile列表：

build: {
  transpile: ['@glidejs/glide']
}

2. 额外添加webpack规则处理ES模块：
   在build.extend中补充规则，避免node_modules中的.mjs文件加载异常：

build: {
  extend(config, { isDev, isClient }) {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto'
    })
  },
  transpile: ['@glidejs/glide']
}

二、解决$i18n未定义错误 #

该错误源于i18n模块未正确配置，或组件中$i18n的访问方式不符合Nuxt上下文规则，按以下步骤排查：

1. 确保@nuxtjs/i18n模块已安装并配置
   先安装依赖：

yarn add @nuxtjs/i18n

然后在nuxt.config.js中添加模块配置：

modules: [
  '@nuxtjs/i18n'
],
i18n: {
  locales: ['en', 'zh'], // 根据业务需求设置语言列表
  defaultLocale: 'en',
  vueI18n: {
    fallbackLocale: 'en',
    messages: {
      en: require('./locales/en.json'),
      zh: require('./locales/zh.json')
    }
  }
}

同时确认项目根目录下存在locales文件夹及对应语言的json文件。

2. 修正组件中$i18n的访问方式

• 选项API中，避免在钩子外直接访问this.$i18n：
  错误写法：

export default {
  title: this.$i18n.t('page.title'), // 此处this未绑定上下文
  created() {}
}

正确写法：

export default {
  data() {
    return { title: '' }
  },
  created() {
    this.title = this.$i18n.t('page.title')
  }
}

• 在asyncData/fetch中需通过上下文参数获取$i18n：

asyncData({ app }) {
  const pageTitle = app.$i18n.t('page.title')
  return { pageTitle }
}

3. 检查Vue Storefront Odoo集成的环境变量
   确保.env文件中配置了语言相关变量：

VSF_LOCALE=en
VSF_CURRENCY=USD

验证步骤 #

1. 清理旧依赖与缓存：

rm -rf node_modules yarn.lock .nuxt

2. 重新安装依赖：

yarn install

3. 重启开发服务器：

yarn dev

内容的提问来源于stack exchange，提问作者Md. Mohiuddin