需求:根据浏览器语言自动切换语言

1.安装vue-i18n,

yarn安装

$ yarn add vue-i18n

npm安装

$ npm install vue-i18n

2.导入语言包

src下创建lang文件夹,定义zh.js,en.js……

zh.js

export default{
part1 : {
name:'姓名',
nation:'地区'
}
part2 : {
gender:'性别'
}
}

en.js

export default{
part1 : {
name:'name',
nation:'nation'
}
part2 : {
gender:'gender'
}
}

3.在src下创建一个文件夹tools,

定义两个文件,一个是i81n.js,一个是lang.js

4.i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n); //导入语言包
import Zh from '../lang/zh.js'; // 中文语言包
import En from '../lang/en.js'; // 英文语言包 const messages = {
zh: Zh, // 中文语言包
en: En, // 英文语言包
} export default new VueI18n({
locale: 'zh', // set locale 默认显示中文
fallbackLocale: 'en', //如果语言包没有,则默认从英语中抽取
messages: messages // set locale messages
});

5.lang.js

export default function lang() {
let lang = navigator.language; //浏览器语言判断
lang = lang.substr(0, 2);
switch (lang) {
case 'zh': //中文
lang = 'zh';
break;
case 'en': //英文
lang = 'en';
break;
default:
lang = 'en';
}
return lang;
}

6.main.js中导入i18n.js以及lang.js

//引入多语言支持
import i18n from './tools/i18n.js'
import lang from './tools/lang.js'
window.lang = lang new Vue({
i18n, //挂载i18n
router,
store,
Axios,
render: h => h(App)
}).$mount('#app')

7.使用

挂载到页面

<p>{{$t('part1.name')}}</p>
<p>{{$t('part2.gender')}}</p>

js中使用

document.title = this.$t("part1.nation");

页面使用语言

created: function() {
//切换语言
this.$i18n.locale = lang();
}

vue-i18n可能出现的问题

vue-i18n安装配置,运行的更多相关文章

  1. centos8安装fastdfs6.06集群方式三之:storage的安装/配置/运行

    一,查看本地centos的版本 [root@localhost lib]# cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) 说 ...

  2. centos8安装fastdfs6.06集群方式二之:tracker的安装/配置/运行

    一,查看本地centos的版本 [root@localhost lib]# cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) 说 ...

  3. vue的安装配置

    1.访问vue的官网: https://cn.vuejs.org/v2/guide/installation.html安装配置 2.安装淘宝镜像项目搭建 .安装node  到官网下载安装.  (中)h ...

  4. vue的安装配置与项目创建

    1,安装vue必须先安装node.js.  --------去官网安装node.js 因为npm依赖node.js环境,使用npm的时候需要安装node.js.安装node.js的时候npm会默认安装 ...

  5. JMeter安装+配置+运行

    环境配置: 操作系统:Win7系统 jdk版本:1.8 JMeter版本:3.0 一  JMeter的安装配置过程 JMeter是100%纯java应用程序,它在任何支持完整java实现的系统上都能正 ...

  6. windows + flutter +android+ vscode 安装配置运行流程(详细版本)

    flutter 是由谷歌发布的一个全新的响应式.跨平台.高性能的移动开发框架,可以快速在iOS和Android上构建高质量的原生用户界面. 框架特点 快速开发:Flutter的热重载可以快速地进行测试 ...

  7. windows server,nginx安装,配置,运行nodeJS后端的web项目的实现,以及错误分析及解决方法

    一.安装nginx 下载windows版nginx (http://nginx.org/download/nginx-1.12.2.zip),之后解压到需要放置的位置(C:\nginx) 二.将Ngi ...

  8. vue之安装配置

    直接上图

  9. 自动化测试平台(Vue前端框架安装配置)

    Vue简介: 通俗的来说Vue是前端框架,用来写html的框架,可轻量级也可不轻量级 Vue特性: 绑定性,响应性,实时性,组件性 安装软件以及控件: 控件库:element-ui node.js ( ...

  10. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

随机推荐

  1. puppet(4)-类、模版语言、模块

    puppet(4)-类.模版语言.模块 代码重用: class, module 类 类的简单说明 类是用于公共目的的一组资源,是命名的代码块,创建后可在puppet全局进行调用,类可以继承类是我们构建 ...

  2. KafkaManager对offset的两种管理方式

    OffsetManager主要提供对offset的保存和读取,每个broker都有一个OffsetManager实例,kafka管理topic的偏移量有2种方式: 1.ZookeeperOffsetM ...

  3. 真-关闭win10安全中心(windows defender)

    狂客原创,转载请注明.侵权必究 第一 任务管理器 启动项 禁用 第二 使用win+R,打开运行命令输入:gpedit.msc然后点击确定 在管理模块下找到Windows组件,接续打开下拉菜单,找到Wi ...

  4. 大整数加减运算的C语言实现

    目录 大整数加减运算的C语言实现 一. 问题提出 二. 代码实现 三. 效果验证 大整数加减运算的C语言实现 标签: 大整数加减 C 一. 问题提出 培训老师给出一个题目:用C语言实现一个大整数计算器 ...

  5. Redis 主从配置(Windows版)

    安装从库 1.复制一份 Redis 文件,当做从库. 2.修改从库文件中 redis.windows.conf 的端口号. 3.安装服务,需要重新设置名称.然后去服务中,开启“redis6380”(此 ...

  6. 24、设计模式、webpack

    利用静态属性:长驻内存 (一) 单例模式 概念:单个实例,只有一个对象,多次创建,返回同一个对象. 单例模式的核心:==确保只有一个实例==,并提供全局访问. //利用了静态属性:长驻内存 funct ...

  7. ffmpeg快速获取视频截图

    使用ffmpeg可以非常方便的生成视频截图,命令行下的mplayer也可以做视频截图,只不过mplayer在本质上还是调用ffmpeg来实现.ffmpeg 通过指定 -vcodec 参数为 mjpeg ...

  8. PHP面试大全 基础篇100道问题

    2017年3月7日14:23:21 其实计划很久但是移植没时间去收集和处理弄成一个完整的文件 SVN地址: https://git.oschina.net/zxadmin/live_z 目前基础部分更 ...

  9. Vue中computed,methods 和watch

    Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...

  10. 【转载】word2vec原理推导与代码分析

    本文的理论部分大量参考<word2vec中的数学原理详解>,按照我这种初学者方便理解的顺序重新编排.重新叙述.题图来自siegfang的博客.我提出的Java方案基于kojisekig,我 ...