javascript - 如何在vue文件中导入i18n

Question

我在 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");

Answer 1

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

import VueI18n from 'vue-i18n';

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

并在 main.js 中将 i18n var 传递给您的 Vue:

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

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

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