vue 国际化i18n 多语言切换

tuomao 发布于2019-04-23 13:19 / 903人阅读

摘要：如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

安装

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

注意：

比如说上面的hi 你要通过这种形式来写的时候，不能放在data 里面，因为当语言切换的时候他是不会变的，要写在computed内

此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

混合云服务器托管多语言多语言对应多语言商城网站多语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1720.html

编写简单i18n库

摘要：因为两次的开发维护体验产生了对比，使我产生了不小的兴趣假设一个简单的页面需要多语言。两个简单的区别就是和替换的区别。样式模式其实就是简单的切换。当修改的某个值时，会触发对应的，并发射信号通知节点去更新。 i18n是什么？i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）是国际化的简称。前言第一次接触多语言是用野生javascri...

txgcwm 2019-08-26 11:46 评论0 收藏0
编写简单i18n库

摘要：因为两次的开发维护体验产生了对比，使我产生了不小的兴趣假设一个简单的页面需要多语言。两个简单的区别就是和替换的区别。样式模式其实就是简单的切换。当修改的某个值时，会触发对应的，并发射信号通知节点去更新。 i18n是什么？i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）是国际化的简称。前言第一次接触多语言是用野生javascri...

DevWiki 2019-08-01 18:35 评论0 收藏0
vue-i18n和elementUI实现国际化

摘要：为了满足很多公司都已经向方向发展顾使用多语言的网站已经太普遍了所以是使用和实现国际化接下来我会尽量写的详细一点的内容个人觉得的应该写得清楚一些安装所需要用到的东西安装安装创建目录编写所需要用到的语言我只写了中文和英文欢迎来到我为了满足很多公司都已经向international方向发展,顾使用多语言的网站已经太普遍了, 所以是使用vue-i18n和elementUI实现国际化.接下来我...

_ang 2019-08-22 18:14 评论0 收藏0
vue-i18n结合Element-ui的配置

摘要：官网已经做了详细介绍，这里依葫芦画瓢跟着实现一下为了实现插件的多语言切换按照如上把国际化文件都整合到一起，避免中大段引入相关代码。使用方法：在配合 Element-UI 一起使用时，会有2个问题： ####（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存 ####（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字关于第一个问题，可以在初始化...

孙淑建 2019-08-26 13:51 评论0 收藏0
如何让一个vue项目支持多语言（vue-i18n）

摘要：引入是一个插件，主要作用就是让项目支持国际化多语言。所以新建一个文件夹，存放所有跟多语言相关的代码。目前包含三个文件。全局搜索发现一共有多个。这两天手头的一个任务是给一个五六年的老项目添加多语言。这个项目庞大且复杂，早期是用jQuery实现的，两年前引入Vue并逐渐用组件替换了之前的Mustache风格模板。要添加多语言，不可避免存在很多文本替换的工作，这么庞杂的一个项目，怎么才能使...

wuyumin 2019-08-22 17:31 评论0 收藏0