如何在Vue文件中导入i18n答案

【问题标题】：How to import i18n in Vue file如何在Vue文件中导入i18n
【发布时间】：2020-11-26 17:12:51
【问题描述】：

我在 Vue.js 中使用 i18n 库进行语言翻译。我想在其中导入我的脚本并在数据中存储一个值，但是我在导入它时遇到了麻烦。我应该如何导入它？我尝试使用 import $t from "./i18n"; 但这只会返回此错误：Module not found: Error: Can't resolve './i18n'

这是我的代码：

script>
import Header from "../components/Header";
import $ from "jquery";
import $t from "./i18n";

export default {
  name: "GroupPermissions",
  components: {
    Header
  },
  data() {
    return {
      showAddGroupDialog: false,
      updatePermissionDialog: false,
      itemsToBeDeleted: [],
      permissions: $t("groupPermissions.table.permissions")
    };

还有我的 main.js：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import VueMaterial from "vue-material";
import "vue-material/dist/vue-material.min.css";
import "vue-material/dist/theme/default.css";
import "vue-multiselect/dist/vue-multiselect.min.css";
import $ from "jquery";
import Multiselect from "vue-multiselect";
import i18n from "./i18n";
import "@/plugins/echarts";
import Sticky from 'vue-sticky-directive'

Vue.component("multiselect", Multiselect);
Vue.use(VueMaterial);
Vue.use(Sticky);

Vue.config.productionTip = false;

new Vue({
  router,
  $,
  i18n,
  render: h => h(App)
}).$mount("#app");

【问题讨论】：

标签： javascript internationalization vue-i18n

【解决方案1】：

Imre 展示了如何全局安装 vue-i18n。我只是补充一点，您还可以导入 i18n 的实例并在任何 javascript 文件中使用它，而不仅仅是在 Vue 组件中。

如果你像这样导出i18n

import VueI18n from 'vue-i18n';

export const i18n = new VueI18n({
    locale: 'en',
    messages: { 'en': { title: 'Title' }},
});

然后你可以在 Vue 组件中使用它，尽管using this.$t() 更可取。

<script>
import Header from "../components/Header";
import $ from "jquery";
import { i18n } from "./i18n";

export default {
  name: "GroupPermissions",
  components: {
    Header
  },
  data() {
    return {
      showAddGroupDialog: false,
      updatePermissionDialog: false,
      itemsToBeDeleted: [],
      permissions: i18n.t("groupPermissions.table.permissions")
    };
</script>

但更重要的是，您可以在其他任何地方使用它。

//some-function.js
import { i18n } from "./i18n";

function someFunction() {
  console.log(i18n.t(...));
}

【讨论】：

【解决方案2】：

如果你想使用vue-i18n，在你的main.js中你应该首先导入vue-i18n库并创建一个像这样的i18n变量：

import VueI18n from 'vue-i18n';

const i18n = new VueI18n({
    locale: 'en',
    messages: { 'en': { title: 'Title' }},
});

然后将 i18n var 传递给 main.js 中的 Vue：

new Vue({
  router,
  $,
  i18n,
  render: h => h(App)
}).$mount("#app");

在此之后，在您的组件中，您将拥有一个 this.$t('title') 方法，该方法将返回 'Title' 值。

此链接可能对您有所帮助：http://kazupon.github.io/vue-i18n/started.html#javascript

【讨论】：