Vue + i18n实现国际化

来源：互联网发布：雅尔塔体系知乎编辑：程序博客网时间：2024/05/21 06:19

首先，介绍下项目结构，如图：这里写图片描述

1.在i18n/lang下编写json文件。

//zh_CN.json{"message":{"hello": "关于"}}//en.json{"message":{"hello": "about"}}

2.i18n/index.js 国际化配置文件

import VueI18n from 'vue-i18n'//需先安装vue-i18nimport Vue from 'vue'Vue.use(VueI18n)var subDomainsMap = {'en': 'en', 'cn': 'zh_CN'}var initial = 'zh_CN'//var hostName = window.location.hostname//var subDomain = hostName.split('.')[0]//if (subDomainsMap[subDomain]) {//  initial = subDomainsMap[subDomain]//}var langMessages = {  lang: require('./lang/' + initial + '.json')}var i18n = new VueI18n({  locale: 'lang',  messages: langMessages})export default i18n

3.main.js中引入i18n以及配置文件

import i18n from './i18n' //引入配置文件new Vue({    el: '#app',    router,    i18n: i18n,   //实例中 引用国际化    template: '<App/>',    components: { App },});/*//1s后更改语言setTimeout(function(){    i18n.locale = "cn"},1000)*/

4.在html中应用

//建议此方法<span v-text="$t('message.hello')"></span>//or<p>{{ $t("message.hello") }}</p>

阅读全文

0 0