vue后台管理添加多语言功能的实现示例
作者:武向前 时间:2024-04-29 13:08:22
在这家公司一个项目, 需要添加英文版本,就是中英文化了,直接上代码
1.首先是main.js页面做配置
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
const i18n = new VueI18n({
//locale: 'zh-CN', // 语言标识
locale: 'Chinese', // 语言标识
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'Chinese': require('./common/lang/zh'), // 中文语言包
'English': require('./common/lang/en') // 英文语言包
},
//隐藏警告
silentTranslationWarn: true
})
new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>'
})
2.配置相应路径下的语言包,在这儿只显示部分代码,需要什么在这儿添加什么即可
en.js
export const m = {
deviceCode: 'Device Code',//设备编码
deviceName: 'Device Name',//设备名称
deviceType: 'Device Type',//设备类型
denial: 'Denial',//拒止
camera: 'Camera',//摄像机
}
zh.js
export const m = {
deviceCode: '设备编码',//设备编码
deviceName: '设备名称',//设备名称
deviceType: '设备类型',//设备类型
denial: '拒止',//拒止
camera: '摄像机',//摄像机
}
3.页面中使用,不同的地方使用,写法略有不同
(1)placeholder和按钮的写法
<el-row :gutter="30">
<el-col :span="4">
<div class="grid-content bg-purple">
<el-input v-model="value0" :placeholder="$t('m.placeOne')"></el-input>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content bg-purple">
<el-button @click="searchData()" type="primary" icon="el-icon-search">{{ $t('m.query') }}</el-button>
<el-button @click="dialogVisible = true" type="warning">{{ $t('m.AddDevice') }}</el-button>
</div>
</el-col>
</el-row>(2)table的写法
<el-table
:data="tableData"
stripe
style="width: 100%;">
<el-table-column
prop="areaName"
:label="$t('m.areaName')"
width="100">
</el-table-column>
</el-table>
(3)子组件弹框写法
<el-dialog :title="$t('m.Ediedevice')" :visible.sync="dialogVisibles" width="30%" :before-close="handleClose" :close-on-click-modal=false>
<edit-equipment @subsuccess="subsuccess" :editDate="editDate" style="overflow: hidden;"></edit-equipment>
</el-dialog>
(4)js中拼接字符串写法
strHtml = strHtml + "<td>"+this.$i18n.t('m.deviceCode')+":</td>";
来源:https://www.cnblogs.com/wuzhaoyu/p/14657785.html
标签:vue,后台管理,多语言功能
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python实现写数字文件名的递增保存文件方法
2022-10-18 18:50:50
Javascirpt打造“互动指针”特效
2013-08-06 07:37:52
Python实现识别图片内容的方法分析
2022-01-04 21:10:51
IPv6设置后如何解决MySQL无法连接localhost的问题
2024-01-20 00:50:38
![](https://img.aspxhome.com/file/2023/1/124821_0s.png)
Python机器学习工具scikit-learn的使用笔记
2021-08-30 10:28:50
![](https://img.aspxhome.com/file/2023/4/100914_0s.png)
Go语言自定义linter静态检查工具
2024-02-13 15:32:20
![](https://img.aspxhome.com/file/2023/7/113077_0s.png)
CSS 的模块化思想
2009-02-03 12:52:00
Python中的模块和包概念介绍
2023-06-06 09:13:53
python opencv 图像拼接的实现方法
2021-06-21 19:11:51
![](https://img.aspxhome.com/file/2023/3/67933_0s.jpg)
python用pyecharts画矩形树图实例
2022-12-20 21:42:04
![](https://img.aspxhome.com/file/2023/0/90310_0s.png)
flv.js的具体使用教程
2024-04-28 09:53:08
![](https://img.aspxhome.com/file/2023/2/132722_0s.png)
Python按键或值对字典进行排序
2021-01-02 10:45:52
Python操作MySQL模拟银行转账
2022-05-19 21:23:11
Python 面向对象之类class和对象基本用法示例
2023-01-02 20:15:01
如何利用pycharm进行代码更新比较
2022-06-21 17:13:09
![](https://img.aspxhome.com/file/2023/1/115711_0s.png)
pandas 实现将NaN转换为None
2023-01-23 21:23:09
![](https://img.aspxhome.com/file/2023/8/131238_0s.png)
如何利用python turtle绘图自定义画布背景颜色
2021-08-02 17:28:49
![](https://img.aspxhome.com/file/2023/4/97414_0s.png)
如何利用SQL Server 2005中的模板参数
2009-01-23 15:02:00
asp统计在线人数是实时的吗?
2010-07-14 21:07:00
django admin search_fields placeholder 管理后台添加搜索框提示文字
2022-02-11 14:31:53
![](https://img.aspxhome.com/file/2023/6/121136_0s.png)