一、靜態轉換
- 使用 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),
});
使用
<template>
<div id="pageDiv">
<section class="content">
<h3>{{$t("login.title")}}</h3>
<button @click='langToggle'>切換語言</button>
</section>
</div>
</template>
<script>
export default {
data() {
return {
};
methods: {
langToggle(){
if(this.$i18n.locale == 'zh_CN'){
this.$i18n.locale = 'en_US';
}else{
this.$i18n.locale = 'zh_CN';
}
console.log(this.$i18n.locale)
}
},
mounted(){
},
created() {
}
};
</script>