vue多语言转换的几种方法

一、静态转换

• 使用 Vue 插件 language-tw-loader
• 在打包时把本地的文字转换成繁体，动态加载的文字不会转换。也就是说接口返回的文字不会自动转换。
• 打包后无法再切换为简体。除非专门打一个简体的包。

使用方式

1、安装插件

npm i language-tw-loader --save

2、修改 webpack 配置文件webpack.base.conf.js

module: {
rules: [......{test: /\.(js|vue)$/,loader: 'language-tw-loader',}]
}

3、打包或者运行

npm run dev

此方法不适用于vue-cli3 

二、vue-i18n按字查询替换

1、安装

npm install vue-i18n

2、然后在我们的项目中的statics文件夹下面添加i18n文件夹，然后在文件夹中新建我们的json格式的语言包目录大致为：

en.js

module.exports = {login:{'title' : 'this title','username' : 'Please enter the user name','password' : 'Please enter your password',},
}

zh.js

  module.exports = {login:{'title' : '标题','username' : '请输入用户名','password' : '请输入密码',},
}

在i18n.js中引入i18n和语言包

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)// 以下为语言包单独设置的场景，单独设置时语言包需单独引入
const messages = {'zh_CN': require('../statics/i18n/zh'),   // 中文语言包'en_US': require('../statics/i18n/en')    // 英文语言包
}// 最后 export default，这一步肯定要写的。
export default new VueI18n({locale : 'en', // set locale 默认显示英文messages : messages // set locale messages
})

然后在main.js中挂载至入口文件

- main.js
//注意，因为我们index.js中把i18n绑定到了window，所以要在第一个引入
import i18n from './locales'
import Vue from 'vue'
import App from './App.vue'
import './common.scss'const app = new Vue({components: {App},i18n,render: h => h(App),
});

使用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！