彻底解决vue-i18n报错：You are running the esm-bundler build of vue-i18n的终极方案

2023-09-10 17:57:05

vue-i18n 错误修复：解决“You are running the esm-bundler build of vue-i18n”警告

在使用 vue-i18n 时，开发人员可能会遇到一个常见的错误：“You are running the esm-bundler build of vue-i18n”。这个错误表明你正在使用 vue-i18n 的 ESM 构建版本，这是为模块化环境设计的，而你需要的是 UMD 构建版本，用于在浏览器中直接使用。

理解错误的含义

vue-i18n 提供了两种构建版本：ESM（模块化）和 UMD（通用模块定义）。ESM 版本适用于模块化环境，如 Vue.js 项目，而 UMD 版本则适用于在浏览器中直接使用。

默认情况下，npm 安装 vue-i18n 时，会安装 ESM 版本。然而，如果你需要在浏览器中直接使用它，则需要使用 UMD 版本。

解决错误

要解决这个错误，你需要执行以下步骤：

安装 vue-i18n 的 UMD 版本：

npm install --save vue-i18n@next

在项目中导入 UMD 版本：

import VueI18n from 'vue-i18n/dist/vue-i18n.common.js';

创建一个 Vue 实例并安装 vue-i18n：

const app = new Vue({
  plugins: [VueI18n],
});

创建一个 vue-i18n 实例并将其添加到 Vue 实例：

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      hello: 'Hello, world!',
    },
  },
});

app.use(i18n);

在组件中使用 vue-i18n：

<template>
  <p>{{ $t('hello') }}</p>
</template>

<script>
export default {
  methods: {
    $t(key) {
      return this.$i18n.t(key);
    },
  },
};
</script>