目录一、静态转换使用方式二、Vue-i18n按字查询替换使用总结一、静态转换 使用 Vue 插件 language-tw-loader在打包时把本地的文字转换成繁体,动态加
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
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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue多语言转换的几种方法总结
本文链接: https://www.lsjlt.com/news/196730.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0