如何在vue文件中导入i18n

Question

我在 Vue.js 中使用 i18n 库进行语言翻译。我想在其中导入我的脚本并在数据中存储一个值，但我在导入它时遇到了麻烦。我应该如何导入它？我尝试使用 import $t from "./i18n"; 但只是 returns 这个错误：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') 方法，该方法将 return 和 'Title' 值。

这篇link可能对你有帮助：http://kazupon.github.io/vue-i18n/started.html#javascript

Answer 2

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(...));
}

如何在vue文件中导入i18n

How to import i18n in Vue file

javascript

internationalization

vue-i18n