- npm install vue - i18n--save
一般把它放到 npm 工程中的 src 目录下,因为这个目录是要进行编译的,而我们是需要把这些语言包全部编译进去
我们在 src 建立一个 local 文件夹,然后建立两个文件
我们不一定非要按照国际语言规范来命令,比如我们直接命名为 abc.js 也可以,只需要在对应的关系中读取这个 js 文件即可
- export const message = {
- global: {
- view: "view",
- configList: "config list"
- },
- index: {
- xx: "xx"
- }
- }
需要注意的是,对应的 json 结构需要保持一至,因为是要按照 key 来读取相应的 value
- export const message = {
- global: {
- view: "视图",
- configList: "配置列表"
- },
- index: {
- xx: "xx"
- }
- }
在 main.js 在配置
- import VueI18n from 'vue-i18n'Vue.use(VueI18n);
- const i18n = new VueI18n({
- locale: 'zh-cn',
- //这个配置的是默认的语言包
- messages: {
- 'zh-cn': require('./local/language-zh.js'),
- // 中文语言包
- 'en': require('./local/language-en.js') // 英文语言包
- },
- });
- new Vue({
- el: '#app',
- i18n: i18n,
- });
既然我们配置了语言包,那我们使用的过程中,肯定就不能自己写文本内容了,而是要使用相应的 key 来定义
- <div slot="header" class="clearfix">
- <span>{{$t("message.global.view")}}</span>
- </div>
- <pie-data :text="$t('message.index.configNumber')">202</pie-data>
注意:这个 this 是指 vue 对象
- {required : true , message : this.$t('message.config.addForm.tips.versionNotNull'),trigger : "blur"}
来源: https://www.cnblogs.com/zhuxiaojie/p/8157720.html