在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
并不能像这样引用了。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
VUE也是由js代码，对于国际化，考虑使用javascript的intl,
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：基于 iView 的 Vue js 后台管理系统，简洁易扩展。原文链接：
用户：admin
密码：admin
我的服务器 gzip 开启有点问题，所以访问可能会慢点。大家可以点击左边菜单栏的：文章管理 & 文章列表，查看效果。目前，只写了一个简单的业务模块，供大家参考。
基于 vue-cli + iView 的 Vue js 后台管理系统，在 vue-cli 基础上做了一些合理的修改和增强。功能包括：调试、构建、代码规范校验、单元测试、国际化等。
本项目的初衷是整理一套通用的 Vue js 单页应用模板，由于近期项目需要，才加入 iView。但是，你可以很轻松地从本项目中剥离 iView，获取一套通用的 Vue js 单页应用模板，或者加入其它 Vue js 的 UI 组件库。
如何剥离 iView？去除
的相关操作即可。
Vue、Webpack、ES6、vue-router、Vuex、Sass、PostCSS 等。
# 下载代码
$ git clone /zhaotoday/vue.js.git
# 安装依赖
$ npm install
# 开发调试
$ npm run dev
$ npm run build
# 执行单元测试
$ npm run unit
# 执行 e2e 测试
$ npm run e2e
# 执行所有测试
$ npm test
理由：原 vue-cli 构建后的 index.html 存放在 dist 目录下。但通常，我们需要把整个项目提交到 git/svn，然后部署，这时候访问的默认首页需要是构建后的 index.html。
# 安装 node-sass、sass-loader
$ npm install --save-dev node-sass sass-loader
&!-- 引入样式 --&
&style lang="scss" scoped src="./theme/styles/index.scss"&
官方已经不推荐 vue-resource 作为 ajax 方案，请用 axios 代替。
# 安装 axios
$ npm install --save axios
按需引入 polyfill，提高浏览器兼容性。
# 安装 core-js
$ npm install --save core-js
polyfill 在 /src/utils/polyfill.js 文件中引入：
import 'core-js/es6/promise'
# 安装 vuex
$ npm install --save vuex
// Webpack 项目构建
|-- config
// 项目开发环境配置
// 源码目录
// 业务代码
|-- Articles
// 文章业务模块
|-- Layout
// 页面布局结构（除登录页外）
|-- NotFound
// 根页面（可以在这里添加全局样式等）
|-- Unauthorized
// 未授权页面（在开发权限相关系统时有用）
|-- components
// 公共组件
// 全局国际化
|-- models
// 数据模型（主要在 store 中用到）
|-- router
// 路由配置
|-- routes
// 各业务模块路由配置
// Vuex 状态管理
|-- actions.js
// 根级别的 actions
|-- getters.js
// 根级别的 getters
|-- mutations.js
// 根级别的 mutations
|-- types.js
// 根级别的 mutation types
|-- modules
// 各业务模块的局部状态管理
|-- articles
// 文章业务模块状态管理
// 工具集合
|-- helpers
// 帮助函数集合
|-- mixins
|-- auth.js
// 权限相关
|-- env.js
// 环境配置类
| & & & |-- fastclick.js & & & & & & // 全局处理移动端 onclick 事件的延迟 300 ms 问题（仅移动端需要引入）
| & & & |-- consts.js & & & & & & &
// 常量配置
|-- i18n.js
// 国际化类
|-- init.js
|-- polyfill.js
// polyfill
|-- rest.js
// RESTful 请求类
|-- App.vue
// 页面入口
|-- main.js
// 程序入口，加载各种公共组件
|-- static
// 静态文件，如：图片、JSON 数据等
|-- .babelrc
// babel-loader 配置
|-- .editorconfig
// 定义代码格式
|-- package.json
// 项目基本信息
按照 vue-cli 的 Hello 示例，组件（这里说的是组件文件夹）命名应遵循帕斯卡（pascal）命名法，如：MyComponent。
当然，也有很多人喜欢命名成 my-component 的形式。这个规范不是强制性的，你可以选一种适合自己的。
公用组件放在 /src/components 下。 |-- src
// 源码目录
|-- components
// 公用组件
|-- MyComponent
// MyComponent 组件
|-- index.vue
// MyComponent 的入口
// MyComponent 的皮肤
|-- images
// MyComponent 的图片
|-- styles
// MyComponent 的样式
|-- index.scss
// MyComponent 的样式入口
// MyComponent 的工具集合
// MyComponent 的国际化
|-- components
// MyComponent 的子组件
|-- ChildComponent
// MyComponent 的子组件 ChildComponent，组件规范和 MyComponent 一致
业务组件放在 /src/app 下，也就是一个页面，对应一个路由。规范和公用组件一直。
# 安装 less-loader、less
$ npm install --save-dev less-loader less
新建 /theme/global/index.less：
@import '~iview/src/styles/index.less';
/* 接下来开始覆盖 less 变量 */
编辑 /src/main.js：
import iView from 'iview'
import './theme/global/iview/index.less'
相关热门文章65在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
今天自己在研究iview的国际化，前前后后搜到了好几遍这个问题。我来答一下，希望对后来的同学有帮助。这里可以借助jquery的$.extend实现对象合并。var selfMessageCN={
Name:"张三",
sayHello:"你好，{name}"
var selfMessageEN={
Name:"zhangsan",
sayHello:"hello,{name}"
};const messages = {
$.extend({},zhLocale,selfMessageCN),
en_US:$.extend({},enLocale,selfMessageEN),
可以参考这个，我实现后的文章：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
趁着10月的最后一天，来写一篇关于前端国际化的实践型博客。国际化应该都不陌生，就是一个网站、应用可以实现语言的切换。
在这就不谈原理，只说说如何实现中英文的切换。做技术的总得先把 demo 做出来嘛。
二、demo 场景需求分析
需求很简单，左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮，点击弹出提示框，确认切换语言后，实现英文版本。
切换成英文版本：
三、实现国际化
首先，我开发是以 vue 为技术栈，所以如题用的国际化插件是 vue-i18n，附上 。
1、我们得先有开发环境，先有项目跑起来，我推荐如果是喜欢用 vue 的小伙伴，可以尝试 vue-cli　官方脚手架。这边有我整理的一个脚手架
，有助于你快速的进行 vue 模块化开发。
2、我们需要安装 vue-i18n, 推荐 npm 包依赖：
$ npm install vue-i18n
当然你也可以这样：
&script src="/vue/dist/vue.js"&&/script&
&script src="/vue-i18n/dist/vue-i18n.js"&&/script&
3、注入 vue 实例中，项目中实现调用 api 和 模板语法
这边我是顺着使用 npm 安装依赖进行。先在 main.js 中引入 vue-i18n。
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
const i18n = new VueI18n({
locale: 'zh-CN',
// 语言标识
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./common/lang/zh'),
// 中文语言包
'en-US': require('./common/lang/en')
// 英文语言包
/* eslint-disable no-new */
el: '#app',
// 不要忘记
template: '&App/&',
components: { App }
上面的代码正式将 vue-i18n 引入 vue 项目中，创建一个 i18n 实例对象，方便全局调用。我们通过 this.$i18n.locale 来进行语言的切换，同样的我这边的例子里就是通过点击事件，点击‘’网易云音乐‘’，来触发事件，切换locale 的值。
4、ok, 引入的事情就是这样，那么既然实现国际化，这边简单的是中英文切换，那么自然我们需要中英文两套语言的文件，vue-i18n中相对简单，只需要两个 js 文件，通过 require 的形式引入到 main.js。
en.js 英文语言包：
export const m = {
music: 'Music',//网易云音乐
findMusic: 'FIND MUSIC',//发现音乐
myMusic: 'MY MUSIC',//我的音乐
friend: 'FRIEND',//朋友
musician: 'MUSICIAN',//音乐人
download: 'DOWNLOAD'//下载客户端
zh.js 中文语言包：
export const m = {
music: '网易云音乐',
findMusic: '发现音乐',
myMusic: '我的音乐',
friend: '朋友',
musician: '音乐人',
download: '下载客户端'
最后我们只需要通过触发事件的形式，来控制 locale 的值，去调用对应的语言包就可以实现国际化啦。
5、组件中如何去切换 locale 的值，实现语言切换。
locale: 'zh-CN',
// 语言标识
messages: {
'zh-CN': require('./common/lang/zh'),
// 中文语言包
'en-US': require('./common/lang/en')
// 英文语言包
在 main.js 中的代码中，可以看到，当 locale 的值为‘zh-CN’时，版本为中文；当 locale 的值为‘en-US’,版本为英文。当然你也可以换成 zh 和 en，这个不固定，只需要对应上。
好了，现在来看一下，我组件中的一个点击事件中如何进行切换。
* 切换语言
changeLangEvent() {
this.$confirm('确定切换语言吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() =& {
if ( this.lang === 'zh-CN' ) {
this.lang = 'en-US';
this.$i18n.locale = this.//关键语句
this.lang = 'zh-CN';
this.$i18n.locale = this.//关键语句
}).catch(() =& {
this.$message({
type: 'info',
这边的重点就是，点出的‘’关键语句‘’：this.$i18n.locale,当你赋值为‘zh-CN’时，导航栏就变成中文；当赋值为 ‘en-US’时，就变成英文。效果图就是文章前面的样子。
6、到这，前端 vue-i18n 国际化插件在 vue-cli 模块化环境中的开发实践就全部完成了。
四、vue-i18n 数据渲染的模板语法
我们知道 vue 中对于文字数据的渲染，有以‘’{{}}‘’或者 v-text、v-html等的形式，同样的使用国际化后，依旧可以沿用，但需要一点修改。v-text:
&span v-text="$t('m.music')"&&/span&
&span&{{$t('m.music')}}&/span&
五、vue-cli 、vue-i18n 开发练手项目地址
，文档较完善，可以尝试练手，如果你觉得还可以，感谢能给一个 star 。
如果 ，在 vue 开发中遇到相关问题，也可以在下面留言，我会不定时尝试帮你解答。同样之前也写过一些在开发中解决的方案，可以看往期的博客，一个在路上的前端小白，欢迎指正。
0 收藏&&|&&4
你可能感兴趣的文章
1 收藏，52
40 收藏，6k
1 收藏，328
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
我要该，理由是：输入关键字或相关内容进行搜索
需要额外的引入js的国际化语言包还是mui框架自身有集成，好像文档上从头到尾没有提到？
先做好本地化把
自已做成国际化就行了
自己写用JS，替换，把语言写成JSON格式，然后跟据相应的语言获取相应的值。因为这个东西是HTML的，所以按照网页的多语言来搞就对了。
要回复问题请先或
关注: 4 人