vue-cli项目中引入vue-i18n

安装:

npm install vue-i18n可参考vue-i18n官网文档

main.js中引入:

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

配置语言包(main.js):

const i18n = new VueI18n({
locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale
messages: {
'zh-CN': require('./common/lang/zh'), // 中文语言包
'en-US': require('./common/lang/en') // 英文语言包
}
})
new Vue({
el: '#app',
i18n, // 加入
router,
store,
components: { App },
template: '<App/>'
})

语言相关包(zh.js、en.js):

zh.js:

export const lang = {
menu: [
{name: '首页', path: ''},
{name: '企业简介', path: ''},
{name: '企业舆情', path: ''},
{name: '标签管理', path: ''},
{name: '采集管理', path: ''},
{name: '关于我们', path: ''},
{name: '哈哈哈哈', path: ''}
],
login: '登录',
register: '注册',
welcome: '欢迎',
logout: '退出'
}

en.js:

export const lang = {
menu: [
{name: 'HomePage', path: ''},
{name: 'BusinessIntro', path: ''},
{name: 'BusinessInfo', path: ''},
{name: 'TagManage', path: ''},
{name: 'CollectManage', path: ''},
{name: 'AboutUs', path: ''},
{name: 'hahahaha', path: ''}
],
login: 'login',
register: 'register',
welcome: 'welcome',
logout: 'logout'
}

语言切换:

this.$i18n.locale = 'en-US'// 切换成英文
this.$i18n.locale = 'zh-CN'// 切换成中文

使用(同于vue中对于文字数据的渲染,有以“{{ }}”或v-text、v-html等的形式,同样的使用语言国际化(vue-i18n)后,依旧可以沿用):

<el-menu-item
v-for="(item,index) in $t('lang.menu')"
:key="index"
:index="item.path"
:route="item.path">{{ item.name }}</el-menu-item>
<router-link
class="eff"
to="/login">{{ $t('lang.login') }}</router-link>
<router-link to="/register">{{ $t('lang.register') }}</router-link>

eg:

v-text:

<span v-text=”$t(‘lang.welcome’)”></span>

{{ }}:

<span>{{ $t(‘lang.welcome’) }}</span>

以上为基本用法,进阶用法高级用法见后续相关文章,这里主要是不让大家一下接触太多而混淆

原创,转载请注明出处微笑空间站

vue-i18n vue-cli项目中实现国际化 多语言切换功能 一的更多相关文章

  1. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  2. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  3. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  4. Vue笔记:在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  5. vue cli3以上的项目中如何使用axois请求本地json文件

    首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...

  6. SSH 项目中 使用websocket 实现网页聊天功能

    参考文章  :java使用websocket,并且获取HttpSession,源码分析    http://www.cnblogs.com/zhuxiaojie/p/6238826.html 1.在项 ...

  7. django项目中使用bootstrap插件的分页功能。

    官网下载bootstrap插件放到项目中的static文件中 路由 path('blog-fullwidth/', login.fullwidth,name='fullwidth'), 前端页面引入 ...

  8. 在SOUI中使用动态多语言切换

    动态语言切换是很多国际化产品的需求,SOUI之前的版本支持静态多语言翻译,通过在程序启动时设置好语言翻译模块,在程序中打开的UI都会自动调用该翻译模块进行文字翻译,但是不支持运行进语言切换. 最近几个 ...

  9. Silverlight中本地化的实现(语言切换)

    对于本地化这个功能我个人一直觉得在需求阶段就要确定该项目需不需要实行本地化,这样后面就可以减轻许多工作量,Sl中对本地化功能的支持与ASP.NET 中一样,主要使用CultureInfo类来完成的. ...

随机推荐

  1. [常见问题]解决创建servlet 找不到webservlet包.

    今天在创建一个springmvc项目的时候发现 使用的HttpServletRequest不起作用, 提示需要映入 jar文件, 于是便有了今天的这个问题: 百度了下才发现 项目需要导入Runtime ...

  2. Aidl的使用步骤

    先说说Aidl传递参数类型 1.基本数据类型(除short类型) 2.String.charSequence 3.List,map 4.parcelable 第1步:定义一个*.aidl文件,ecli ...

  3. js之json

    关于json不了解的,请点击:http://www.json.org/json-zh.html json对象的属性必须要用双引号,值为字符串类型也只能使用双引号,例:{"name" ...

  4. Typical sentences in SCI papers

       Beginning  1. In this paper, we focus on the need for   2. This paper proceeds as follow.   3. Th ...

  5. FTP设置用户名和密码

    第一步新建用户: 1.电脑右键管理--> 2.本地用户和组--> 3.新建用户,设置密码成功 第二步:开启FTP服务 1.控制面板-->程序-->启用或关闭Windows功能- ...

  6. Mysql漏洞修复方法思路及注意事项

    [系统环境] 系统环境:Red Hat Enterprise Linux Server release 5.4 (Tikanga)  +  5.7.16 MySQL Community Server  ...

  7. 在ubuntu上安装运行ionic项目

    1.安装nodejs.npm curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install - ...

  8. CSS 中的字体兼容写法:用CSS为英文和中文字体分别设置不同的字体

    font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...

  9. jQuery.extend 函数

    jQuery.extend 函数详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.J ...

  10. java 阿里云接口实现发送短信验证码

    此刻自己做的小项目中,需要用到手机发送短信验证码实现注册功能,于是就去阿里云注册了账号,并实现随机发送验证码的功能 第一步:在阿里云官网登录注册   已有支付宝或淘宝的账号可以直接登录,最后需要实名认 ...