1.项目目录结构

├── build                      构建相关配置文件

|     |── index.js             webpack的基础配置入口

├── mock                     项目mock 模拟数据 在后端没有提供接口的情况下可以拦截自己的数据进行开发

├── public                     静态资源

│   │── favicon.ico           favicon图标

│   └── index.html           html模板,主html入口

├── dist                         项目构建后生成的目录结构

|     |── index.html

|     |── static

|     |── css

|     |── js

|     |── images

├── src                      源代码

│   ├── api                  存放数据请求的接口,目录下的js命名(模块名.js)

│   ├── assets               存放静态资源,如字体,图片,公共样式,js等

│   ├── components         全局公用组件 如有一个独立功能需要建立多个组件请建立文件夹

│   ├── directive             全局指令

│   ├── filters                 全局 filter

│   ├── icons                 项目所有 svg icons

│   ├── language           多语言配置

│   ├── layout               全局 layout,框架布局目录

│   ├── router               路由

│   ├── store                 全局 store管理 VueX目录

│   ├── styles               全局样式

│   ├── utils                  全局公用方法

│   ├── views                 views 所有页面 主要用于存放导航或者侧边栏,路由配置成嵌套路由即可存在导航或侧边栏

│   ├── App.vue             入口页面

│   ├── main.js              入口文件 加载组件 初始化等

│   └── permission.js         权限管理

├── tests                     测试

├── .env.xxx                  环境变量配置,测试,线上等

├── .eslintrc.js                  eslint 配置项

├── .babelrc                  babel-loader 配置

├── .travis.yml                自动化CI配置

├── vue.config.js              vue-cli 配置

├── postcss.config.js           postcss 配置

└── package.json               package.json,依赖安装及版本

2.安装多语言模块  npm install vue-i18n --save

创建目录 /src/language,并分别创建文件 en.json、index.js、lang.js、zh.json,以中英文语言切换为例,如果需要增加其他语言,可增加相应的 .json文件即可

├── src                      源代码

│   ├── language           多语言配置目录

│   │   │── index.js          多语言核心入口文件

│   │   │── lang.js           存储用户的语言选择

│   │   │── en.json          中文配置文件

│   │   │── zh.json          英文配置文件

......

/src/language/index.js 文件的内容如下:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import LangStorage from './lang'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' Vue.use(VueI18n) const DEFAULT_LANG = 'zh'
const LOCALE_KEY = 'localeLanguage'
const locales = {
    zh: Object.assign(require('./zh.json'), zhLocale),
    en: Object.assign(require('./en.json'), enLocale)
}
const i18n = new VueI18n({
    locale: LangStorage.getLang('zh'),
    messages: locales
})
export const setup = lang => {
    if (lang === undefined) {
        lang = window.localStorage.getItem(LOCALE_KEY)
        if (locales[lang] === undefined) {
            lang = DEFAULT_LANG
        }
    }
    console.log(lang)
    window.localStorage.setItem(LOCALE_KEY, lang)
    Object.keys(locales).forEach(lang => {
        document.body.classList.remove(`lang-${lang}`)
    })
    document.body.classList.add(`lang-${lang}`)
    document.body.setAttribute('lang', lang)
    Vue.config.lang = lang
    i18n.locale = lang
}
window.i18n = i18n
export default i18n

/src/language/index.js 文件的内容如下:

export default {
    setLang (lang) {
        window.localStorage.setItem('user_lang', lang)
    },
    getLang (defaultLang) {
        const localLang = window.localStorage.getItem('user_lang')
        if (localLang === null) {
            return defaultLang
        } else {
            return localLang
        }
    }
}

/src/language/zh.json 文件的内容如下:

{
    "main": {
        "hello": "你好"
    },
    "Form": "表单",
    "router": {
        "maybe": "也许"
    }
}

/src/language/en.json 文件的内容如下:

{
    "main": {
        "hello": "Hello"
    },
    "Form": "Form",
    "router": {
        "maybe": "Maybe"
    }
}

/src/main.js中新增代码如下:

import i18n from './language'

Vue.use(ElementUI, {
    i18n: (key, value) => i18n.t(key, value)
}) new Vue({
    el: '#app',
    i18n,
    router,
    store,
    render: h => h(App)
})

3.模板中使用

<el-button @click="changeLanguage">中英切换</el-button>

<div>{{$t("main.hello")}}</div>

......

import { setup } from '@/language/index.js'

import LangStorage from '@/language/lang'

methods:{
            changeLanguage () {
                if (this.$i18n.locale === 'en') {
                    setup('zh')
                } else {
                    setup('en')
                }
                LangStorage.setLang(this.$i18n.locale)
            } }

点击按钮即可查看切换效果~~

基于Vue+ElementUI架构的前端国际化解决方案的更多相关文章

  1. 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之自定义组件(四)

    基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实 ...

  2. 前端系列——jquery前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  3. 前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”

    前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都 ...

  4. jquery.i18n.properties前端国际化解决方案“填坑日记”

    但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很 ...

  5. 基于Vue.js的uni-app前端框架结合.net core开发跨平台project

    一.由来 最近由于业务需要要开发一套公益的APP项目,因此结合所给出的需求最终采用uni-app这种跨平台前端框架以及.netcore快速搭建我们的项目,并且能做到一套代码跨多个平台. 当然在前期技术 ...

  6. Vue(三十三)国际化解决方案

    摘自:https://blog.csdn.net/qq_41485414/article/details/81093999 (1)第一种方式:中英文两套页面 优点:技术含量最低 缺点:占内存,响应慢, ...

  7. 基于Vue的机器学习平台前端

    项目演示地址:http://vidanao.com/ml>注意1:前端兼容性不太好,360浏览器比较兼容; >注意2:此vidanao.com也是我的个人博文主页,但目前还没部署 源码地址 ...

  8. 基于Vue element-ui实现支持多级纵向动态表头的仿表格布局

    [本文出自天外归云的博客园] 需求图示如下,多级纵向动态表头表格: 我的思路是用element-ui的layout实现,做出一个仿造表格,能够支持动态的.多级的.纵向的表头: <template ...

  9. Vue -- 项目报错整理(2):IE报错 - ‘SyntaxError:strict 模式下不允许一个属性有多个定义‘ ,基于vue element-ui页面跳转坑的解决

随机推荐

  1. execute,executeQuery,executeUpdate的区别是什么?

    a.Statement的execute(String query)方法用来执行任意的SQL查询,如果查询的结果是一个ResultSet,这个方法就返回true.如果结果不是ResultSet,比如in ...

  2. 30天自制OS(linux环境)-day1

    30天自制OS(linux环境)--第一天 我是在CentOS的环境上面实现的,使用ubuntu的环境也是类似的 第一步:因为要对二进制文件进行编辑,所以安装二进制编辑器hexedit(当然其他的也可 ...

  3. [ABP教程]第二章 图书列表页面

    Web应用程序开发教程 - 第二章: 图书列表页面 关于本教程 在本系列教程中, 你将构建一个名为 Acme.BookStore 的用于管理书籍及其作者列表的基于ABP的应用程序. 它是使用以下技术开 ...

  4. 【老孟Flutter】为什么 build 方法放在 State 中而不是在 StatefulWidget 中

    老孟导读:此篇文章是生命周期相关文章的番外篇,在查看源码的过程中发现了这一有趣的问题,欢迎大家一起探讨. Flutter 中Stateful 组件的生命周期:http://laomengit.com/ ...

  5. Debian9 升级至 Debian10

    前言 目前国内云服务商提供的镜像最新只有 9 , 本文讲解升级至 10 的方法 正文 查看当前版本 lsb_release -a No LSB modules are available. Distr ...

  6. Harbor镜像删除回收?只看这篇

    最近,公司的技术平台,运维的破事儿颇多.Jira无法访问,ES堆内存不足,Jenkins频繁不工作..等等等,让我这个刚入门的小兵抓心脑肝,夜不能寐,关键时刻方恨经验薄弱呀!!一波未平,一波又起,这不 ...

  7. myisam崩溃后发生损坏的概率比innodb高的原因

    myisam崩溃后发生损坏的概率比innodb高的原因

  8. Java高并发与多线程(二)-----线程的实现方式

    今天,我们开始Java高并发与多线程的第二篇,线程的实现方式. 通常来讲,线程有三种基础实现方式,一种是继承Thread类,一种是实现Runnable接口,还有一种是实现Callable接口,当然,如 ...

  9. 翻译 - ASP.NET Core 托管和部署 - 在 Linux 上使用 Nginx 托管 ASP.NET Core 网站

    翻译自 https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-5.0 本文介 ...

  10. ORA-12560错误

    ora-12560错误是一个经典错误之一 下面我们分析一下这个错误: 产生这个错误的原因是什么呢? 1.oracle服务没有启动 Linux下查看$ps -ef | grep ora_ windows ...