使用很简单，官网地址：http://kazupon.github.io/vue-i18n/zh/
npm install vue-i18n --save
新建一个文件夹。及其文件。如下图
index.js文件
import Vue from 'vue';import VueI18n from 'vue-i18n';// import { isInLanguage } from '@/utils/validate';import { getLocalStorage } from '@/utils/local-storage';const { language } = getLocalStorage('language');Vue.use(VueI18n);// 目前商量的方案是请求中携带const i18n = new VueI18n({// 防止恶意修改本地缓存造成异常，记得增加语言时去验证里增加// locale: isInLanguage(language) ? language : 'en', // 语言标识locale: 'en', // 默认显示的语言messages: {'zh-CN': require('./config/zh'),en: require('./config/en')}});export default i18n;
config文件下的en和zh结构是一样的
module.exports = {// 我的设计是一个单页面一个词，然后再加个公共的词。这样子// 每个页面有一个对象，不管是用还是改都好找。我的原则是单词尽量和页面的名字// 相近或者相同或者就用路由的名字tabHome: {// 这个假设是主页的name: '英文版'},currency: {currency: '$',us: 'US'},commonText: {loading: 'Loading...',tip: 'Tips',confirm: 'Confirm',quit: 'Confirm exit?',noData: 'No Data',cancel: 'Cancel'},}
然后是main.js里引入
import i18n from '@/language';new Vue({router,store,i18n, // 这里render: h => h(App)}).$mount('#app');
这个时候的就成功引入了。现在看使用。
vue单页面内使用
<p>{{ $t('tabHome.name') }}<a href="/term">{{ $t('tabHome.name') }}</a></p>
vue单页js内使用
<script>// 这么用 this.$t('setNickname.loginLoading')import { authProfile } from '@/api/api';export default {data() {return {nickName: ''};},methods: {cancelClick() {},saveNick() {this.$toast.loading({message: this.$t('setNickname.loginLoading'),duration: 0,forbidClick: true,mask: true});}}};</script>
如果我想写个js工具类。又不在vue单页面内，也要用到中英文。这个时候要这样子
isPc.js
// 写法 I18n.t('tabHome.pleaseLogin') 这个时候可是没有$符号的哦import I18n from '@/language';console.log(I18n.t('requestErrText.pleaseLogin'));
最后一个问题就是切换语言
import I18n from '@/language';let language = 'en' // 想用英语就等于en想要中文就用zh-CN I18n.locale = language;
vue组件内用
this.$i18n.local = 'en';
结束，有问题希望指正。
如果觉得《vue-i18n中英文或者多语言切换的网站在vue项目中的合理布局结构》对你有帮助，请点赞、收藏，并留下你的观点哦！
