i18n前端国际化 vue

在Vue前端项目中实现国际化(i18n)可以通过以下步骤来完成。

首先，在项目的lang目录下创建index.js文件，并引入Vue和VueI18n库。然后，导入需要翻译的语言包，比如中文和英文的语言包。接着，使用Vue.use(VueI18n)全局注册VueI18n插件。最后，创建一个VueI18n实例，设置locale为默认的语言环境，messages为翻译的内容。将该实例导出，以便在其他地方使用。

在main.js文件中，将i18n实例注入到Vue实例中。确保在创建Vue实例时，将i18n作为一个选项传入。这样就可以在整个应用程序中使用i18n进行国际化。

具体代码如下所示：

在index.js中：

import Vue from "vue";
import VueI18n from 'vue-i18n'
import zn from "./zn"
import en from "./en"

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: "zn",
  messages: {
    "zn": zn,
    "en": en
  }
});

export default i18n

在main.js中：

import Vue from 'vue'
import App from './App.vue'
import i18n from './lang'

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

这样，你就可以在Vue组件中使用i18n进行国际化了。比如，在模板中使用{{$t('message.hello')}}来显示翻译后的文本。

希望以上信息对你有帮助。如果还有其他问题，请随时提问。