使用vue-i18n进行国际化

最新推荐文章于 2024-08-09 07:20:59 发布

E_li_na

最新推荐文章于 2024-08-09 07:20:59 发布

阅读量976

点赞数

分类专栏： vue2.0+

本文链接：https://blog.csdn.net/E_li_na/article/details/80477427

版权

本文详细介绍了如何使用vue-i18n进行前端国际化，包括安装、在main.js中配置、创建语言包、实现切换功能以及处理非静态语言包，如HTML格式和命名、列表格式的文本渲染。

摘要由CSDN通过智能技术生成

一、相关资源

vue-i18n官网,csdn上一个可以练手的项目,这里是github地址，还有博客园上一个写的不错的文章。不过看这两篇文章最后先学过element-ui。
vue-i18n是一个前端国际化的工具，github地址。
兼容vue2.00+。

二、实现国际化

1、安装
$ npm i vue-i18n -D
2、在main.js中将vue-i18n注入到vue实例中

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VuI18n)

const i18n = new VueI18n({
 locale: 'zh-CN',//通过切换locale的值来实现语言切换
 messages: {
  'zh-CN': require('./common/lang/zh'),
  'en-US': require('./common/lang/en')
 }
})

new Vue({
 el: '#app',
 i18n,//
 store,
 router,
 template: