i18n在vue项目中替换js文件中的文本

92huahua

于 2021-05-19 17:09:41 发布

阅读量1.6k

点赞数

分类专栏： Vue 文章标签： vue中使用i18n 替换js文本

本文链接：https://blog.csdn.net/Cinderellahh92/article/details/117036457

版权

本文介绍了在Vue项目中如何使用i18n进行文本国际化，包括在模板、脚本以及独立JS文件中的应用方法，通过封装i18n.js并在main.js中挂载，实现不同场景下的文本替换。

摘要由CSDN通过智能技术生成

项目中使用i18n,可能使用的场景比如在script中和模板中，也可能在js文件中，那么具体都是怎么使用呢？

中英文封装

export default ｛

message： ‘xxx’

｝

在template中使用 { {$t('message')}}

在script中使用 this.$('message')

如果要在js文件中使用，详细如下：

封装i18n.js

import VueI18n from 'vue-i18n'
import Vue from 'vue'
Vue.use(VueI18n) // 通过插件的形式挂载
// 引入ivew的国际化js
import en from 'iview/dist/locale/en-US'
import zh from 'iview/dist/locale/zh-CN'

let getMyStorage = JSON.parse(sessionStorage.getItem('language'))
const i18n = new VueI18n({
  locale: getMyStorage || 'zh_CN',
  messages: {
    // 'ft-CN': require('./lang/ft.js').default,
    'zh_CN': Object.assign(require('../lang/zh').default, zh),
    'en_US': Object.a