vue-i18n 使用小结及疑问

原创 taoserking 随笔 Vue.js 学习笔记 239阅读 2018-05-14 17:21:13 举报

最近公司有一个活动,需要国际化,所以想到了i18n,在实验过程中出现了一个疑问

一般来说:
国际化中:主要分为文字、图片、样式(主要是一些背景图)

基本使用:
1、安装、使用
npm i vue-i18n --save

src 文件夹下 新建了一个 i18n的文件夹

src/i18n 下新建
lang文件夹(放语言文件)
index.js (一些基本的配置)

index.js基本配置:

这里面的vuex 主要存放了一个lang的state

存储在sessionStorage里面,防止用户刷新语言变更

增加一个mutations 修改state lang的值

mian.js中引入i18n 加入到vue实例上

至此基本的引用就完成了

然后在App.vue中 写了个select语言更改dom

选择语言过后,同步更新i18n.locale和sessionStorage
vuex中state.lang因为是绑定值,自然同步更改,如果不是select表单
那么此处要同步更新 vuex state.lang的值

到这里 定义的en.js cn.js中的语言包已经可以在项目中使用,
但是 如果是css中的背景图片 或者是img的连接地址如果处理

首先是img的地址
我考虑的是使用动态地址 如:
<img :src="'/static/images/'+$store.state.lang+'/country.png'">
国际化的图片 放在 不同的文件夹中,文件夹和 lang定义的同步
我这里定义的是'en','cn'
所以我需要国家化的图片存放路径就是:

这样图片基本也搞定了,剩下的就是css背景图处理

开始我想的是 import css的文件 根据vuex state值引用不同的css文件
结果报错,
查找资料说的是import 只能处理静态文件,不知能变量,不支持js判断,所以这条路走不通了

然后我发现require可以,不论是变量还是js处理 均可,但是 require 后 是一直追加 change语言后,一直追加,然后又会出问题,没有达到自己想要的效果

然后看vue-i18n文档 有一个hot reloading ,本以为看到了曙光,试了试好像不是我想要的效果

最后用了比较笨的方法 和img 的src一样 使用了 动态class 如:
<div :class="'test test-'+$store.state.lang"></div>

这样在css 文件中 分开定义
test-cn test-en的背景url
效果是实现了,但是总是感觉不太好,自己也没想到更好的方法

如果有大佬看到,或者对这个有经验的 还望指点一下
我感觉 如果可以向以前jsp页面 定义一个变量,然后变更css 的路径是较好的一个方式!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复