摘要:如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
安装
npm install vue-i18n
新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件
准备翻译信息
en.js
export default { home: { helloworld: "hello workd !" } };
zh.js
export default { home: { helloworld: "你好世界" } };
index.js
创建Vue-i18n实例
import Vue from "vue"; import VueI18n from "vue-i18n"; import enLocale from "./en"; import zhLocale from "./zh"; Vue.use(VueI18n); const i18n = new VueI18n({ locale: localStorage.lang || "zh", messages: { en: { ...enLocale }, zh: { ...zhLocale } } }); export default i18n;
i18n 挂载到 vue 根实例
main.js
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import i18n from "./assets/i18n/index"; Vue.config.productionTip = false; Vue.prototype.$i18n = i18n; new Vue({ router, store, i18n, render: h => h(App) }).$mount("#app");
简单的使用
about.vue
{{ $t("home.helloworld") }}
{{hi}}
注意:
比如说上面的hi 你要通过这种形式来写的时候,不能放在data 里面,因为当语言切换的时候 他是不会变的 ,要写在computed内
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1720.html
摘要:为了满足很多公司都已经向方向发展顾使用多语言的网站已经太普遍了所以是使用和实现国际化接下来我会尽量写的详细一点的内容个人觉得的应该写得清楚一些安装所需要用到的东西安装安装创建目录编写所需要用到的语言我只写了中文和英文欢迎来到我 为了满足很多公司都已经向international方向发展,顾使用多语言的网站已经太普遍了, 所以是使用vue-i18n和elementUI实现国际化.接下来我...
摘要:官网已经做了详细介绍,这里依葫芦画瓢跟着实现一下为了实现插件的多语言切换按照如上把国际化文件都整合到一起,避免中大段引入相关代码。 使用方法: 在配合 Element-UI 一起使用时,会有2个问题: ####(1)、页面刷新后,通过按钮切换的语言还原成了最初的语言,无法保存 ####(2)、框架内部自带的提示文字无法更改,比如像时间选择框内部中的提示文字 关于第一个问题,可以在初始化...
摘要:引入是一个插件,主要作用就是让项目支持国际化多语言。所以新建一个文件夹,存放所有跟多语言相关的代码。目前包含三个文件。全局搜索发现一共有多个。 这两天手头的一个任务是给一个五六年的老项目添加多语言。这个项目庞大且复杂,早期是用jQuery实现的,两年前引入Vue并逐渐用组件替换了之前的Mustache风格模板。要添加多语言,不可避免存在很多文本替换的工作,这么庞杂的一个项目,怎么才能使...
阅读 1492·2021-11-25 09:43
阅读 4030·2021-11-15 11:37
阅读 3161·2021-08-17 10:13
阅读 3488·2019-08-30 14:16
阅读 3517·2019-08-26 18:37
阅读 2474·2019-08-26 11:56
阅读 1108·2019-08-26 10:42
阅读 593·2019-08-26 10:39