vue-cli项目中引入vue-i18n

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

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: '&#
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值