vue项目中使用vue-i18n国际化

JavaScript024

vue项目中使用vue-i18n国际化,第1张

在src/目录下新建lang文件夹

lang/文件中有en.js,index.js,zh.js

例如en.js

zh.js

index.js

在main.js中引入

在组件中的使用

在模板中使用<p>{{ $t("route.home") }}</p>

在有的项目中需要循环侧边栏导航，所以写了一个工具方法

在组件中使用时，引入这个工具方法

请参考

vue-i18n

这是不用vue时，js的前端国际化

一般会新建一个文件存放语言信息

i18n/language_en.properties

i18n/language_zh.properties

html文件

参考 jquery-i18n-properties

查看package.json

i18n.js

在i18n.js文件中，我们不需要关注其他的配置，只需看懂这2项配置即可。

zh.js

en.js

在.vue文件中使用

页面显示中文还是英文取决于i18n.js文件当中的这一行命令

当DEFAULT_LANG = 'zh'，页面显示中文

当DEFAULT_LANG = 'en'， 页面显示英文

嵌入JS应该放在什么位置

1、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

2、如果嵌入JS放在head中，请把嵌入JS放在CSS头部。

3、使用defer。

4、不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用。

PS：很多网站喜欢在head中嵌入JS，并且习惯放在CSS后面，比如看到的www.qq.com，当然也有很多网站是把JS放到CSS前面的，比如yahoo,google。