vue-i18n和elementUI实现国际化

_ang 发布于2019-08-22 18:14 / 2535人阅读

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

为了满足很多公司都已经向international方向发展,顾使用多语言的网站已经太普遍了, 所以是使用vue-i18n和elementUI实现国际化.接下来我会尽量写的详细一点:

element-ui的i18n内容个人觉得的应该写得清楚一些 1.安装所需要用到的东西

npm i element-ui -S  // 安装element

npm install --save vue-i18n //安装i18n

2. 创建目录

3.编写所需要用到的语言(我只写了中文和英文) cn.js

const cn = {
  message: {
      i1: "欢迎来到我的项目",
  },
}


export default cn

en.js

const en = {
  message: {
      i1: "Welcome to my project",
  },
}


export default en;

两个js文件的json里的key命名必须是一样的

i18n.js

import Vue from "vue"
import locale from "element-ui/lib/locale";
import VueI18n from "vue-i18n"
import en from "./langs/en"
import cn from "./langs/cn"
Vue.use(VueI18n)

const messages = {
  en: en,
  cn: cn
}

const i18n = new VueI18n({
  locale: "cn", // 设置默认语言
  messages
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n

main.js


import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css";
import i18n from "./assets/i18n/i18n"
Vue.use(ElementUI);

new Vue({
  el: "#app",
  router,
  i18n,
  components: { App },
  template: ""
})

4.使用 在页面中使用

    {{$t("message.i1")}}

切换语言

        this.$i18n.locale = "en"

项目地址欢迎star

云服务器私有云 vue-i18n elementui nginx18 实现国际化

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

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

Vue国际化处理 vue-i18n 以及项目自动切换中英文

摘要：直接上预览链接国际化处理以及项目自动切换中英文环境搭建命令进入项目目录，执行以下命令安装国际化插件项目增加国际化翻译文件在项目的下添加文件夹增加中文翻译文件以及英文翻译文件，里面分别存储项目中需要翻译的信息。 0. 直接上预览链接 Vue国际化处理 vue-i18n 以及项目自动切换中英文 1. 环境搭建命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18n...

wangtdgoodluck 2019-08-26 11:51 评论0 收藏0
vue-i18n结合Element-ui的配置

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

孙淑建 2019-08-26 13:51 评论0 收藏0
记一次开源学习--D2Admin 人人企业版

摘要：前言上个月月底开源组开源了使用适配人人企业版专业版的前端工程具体详情见人人企业版适配发布。当然，也督促自己产出一篇相关的文章，来记录这次有趣的学习之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上个月月底@D2开源组开源了使用 D2Admin 适配人人企业版(专业版) 的...

notebin 2019-05-21 19:46 评论0 收藏0
基于Vue、vue-i18n实现国际化（多语言）

摘要：在中引入调用第三方插件新建一个对象默认语言配置语言选项是一个配置语言包文件和语言选项的文件，文件内容大致如下语言包列表合并语言包是一个函数，判断当前设置的语言类型，如果没有设置语言，则根据判断是中文还是非中文，非中文则显示英语。 vue-i18n官网 https://kazupon.github.io/vue... 项目用vue-cli构建，用到vue全家桶及webpack、iview...

smallStone 2019-08-23 14:30 评论0 收藏0
vue，使用vue-i18n实现国际化

摘要：需求公司项目需要国际化，点击按钮切换中文英文安装注入实例中，项目中实现调用和模板语法语言标识通过切换的值来实现语言切换中文语言包英文语言包最后对应语言包中文语言包首页概览公司概述财务报表更多附录主要财务指标对比分析新闻事件档案需求公司项目需要国际化，点击按钮切换中文/英文 1、安装 npm install vue-i18n --save 2、注入 vue 实例中，项目中实现调用 ...

jsummer 2019-08-22 16:05 评论0 收藏0