vue-cli项目中引入vue-i18n

最新推荐文章于 2026-02-24 08:14:19 发布

原创

最新推荐文章于 2026-02-24 08:14:19 发布 · 783 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了在vue-cli项目中如何引入并使用vue-i18n进行国际化设置，包括安装步骤、配置语言包、创建zh.js和en.js文件，以及在组件中通过v-text和{{}}双括号方式实现语言切换。文章提供了基本用法，并提示高级用法将在后续文章中讲解。

vue-cli项目中引入vue-i18n

安装：

npm install vue-i18n可参考vue-i18n官网文档

main.js中引入：

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

配置语言包（main.js）:

const i18n = new VueI18n({
  locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale
  messages: {
    'zh-CN': require('./common/lang/zh'), // 中文语言包
    'en-US': require('./common/lang/en') // 英文语言包
  }
})
new Vue({
  el: '#app',
  i18n, // 加入
  router,
  store,
  components: { App },
  template: '<App/>'
})

语言相关包（zh.js、en.js）:

zh.js:

export const lang = {
  menu: [
    {name: '首页', path: ''},
    {name: '企业简介', path: ''},
    {name: '企业舆情', path: ''},
    {name: '标签管理', path: ''},
    {name: '采集管理', path: ''},
    {name: '关于我们', path: ''},
    {name: '哈哈哈哈', path: ''}