vue实践---vue不依赖外部资源实现简单多语操作

vue使用多语，最常见的就是 vue-i18n, 但是如果开发中的多语很少，比如就不到10个多语，这样就没必要引入vue-i18n了， 引入了反正导致代码体积大了，这时候单纯用vue实现多语就是比较好的选择。

第一步

首先建立一个locales.js 存放多语语言包的内容，这里只写了 zh-CN, en这两种语言，其他还想新增的话 方法一样，代码如下：

export default {
 'zh-CN': {
 name: '我是中文名字'
 },
 'en': {
 name: 'I am English name'
 }
 }

第二步

通过浏览器的语言环境，获取对应的语言包，并吧语言包值付给 data 中的 locales

data () {
 return {
 locales: (() => {
　　　　　　// this.lang是父组件传递过来的， 这里的意思就是lang 优先使用父组件传递的语言，如果没有传递，就使用浏览器的语言（navigator.language）
　　　　　　const lang = this.lang || navigator.language
  let useLang = /^zh/.test(lang) ? 'zh-CN' : /^en/.test(lang) ? 'en' : lang
  // Object.keys 获取可枚举的属性 如果浏览器的语言不是英语 中文， 而且传递的lang参数也不是这两种之一，就默认使用 zh-CN
  if (!Object.keys(locales).includes(useLang)) useLang = 'zh-CN'
  return locales[useLang]
 })(),
 }
 },

这个locales最终返回的是一个对象，比如，如果是中文环境，返回的数据如下：

{
 name: '我是中文名字'
}

第三步

既然语言包都获取到了，还剩一个从语言包里面 获取对应key的方法：

 methods: {
 $_t (key) {
  // this.locales就是上面那个对象
  let localeStr = this.locales[key]
  return localeStr
 }
 }

通过$_t这个方法，传入key，就可以获取到对应的value

总结&优化：

这样就实现了不用依赖vue-i18n这样的外部依赖，只使用vue就实现了多语；

$_t 这个方法可以放到 mixins 里面就避免了每次都要引入这个方法。

具体代码看这里： https://github.com/YalongYan/vue-practice/tree/master/vue-simple-multilingual

补充知识：vue-cli 打包(npm run build) 出现 ERROR in xx..js from UglifyJs Unexpected token: punc (()

之前打包还没问题，这次就报错了，后来发现原来是少了 .babelrc 文件， 网上找了好多方法都不行，后来看了之前的项目，原来是少了 .babelrc 文件， 只要在根目录下建立这个文件， 文件内容如下：

{
 "presets": [
 ["env", { "modules": false }],
 "stage-3"
 ]
}

文件位置看下图：

以上这篇vue实践---vue不依赖外部资源实现简单多语操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目实现多语言切换的思路

    Web 项目多语言(i18n,即国际化)是比较常见的需求,常规的做法大概有以下几种: 每种语言单独开发页面,适用于 CMS 之类的网站 多语言文本和页面结构分离,运行时动态替换.适用于单页应用(SPA) 直接用网页翻译插件,机器翻译.这种效果不太理想,同时有一些局限性(后面会讲到) 问题 每一种方案都有各自的优点和局限性,具体项目应该根据实际情况选择.最近在工作中碰到的需求是要在现有的项目基础上快速推出多语言版本.项目是基于 Vue.js 开发的,已经迭代过很多版本了.其实一开始是有规划多语言的

  • 不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

    这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧. 先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态,所以不是太好看,需要的自行修改就好) 我直接用的vue-cli搭建的项目,代码目录如下: 使用方式如下: treeData的格式如下: treeData: [ {open: false, name: '1', level: 0, checked: true}, { open: false, // o

  • vue引用外部JS的两种种方法

    前言 肯定会遇到没有npm化的库 自己写的js 方法 在Vue中该怎么引用呢 第一种 如果库是es6写的 就可以用import 引入 比如我自己写的http 封装接口的方法 就可以这样子导入哦 第二种是jquery的库 可以在静态资源导入(或者是cdn资源加载) 我是vue-cli 3.0 基础之上架构的 把squire这个富文本框放进public文件下面 在index.html中这样子引用 Fannie式总结 自己封装方法 就采用es6方法 这样方便 第三方原生js 或者是jq的插件 直接cd

  • vue实践---vue不依赖外部资源实现简单多语操作

    vue使用多语,最常见的就是 vue-i18n, 但是如果开发中的多语很少,比如就不到10个多语,这样就没必要引入vue-i18n了, 引入了反正导致代码体积大了,这时候单纯用vue实现多语就是比较好的选择. 第一步 首先建立一个locales.js 存放多语语言包的内容,这里只写了 zh-CN, en这两种语言,其他还想新增的话 方法一样,代码如下: export default { 'zh-CN': { name: '我是中文名字' }, 'en': { name: 'I am Englis

  • vue实践---根据不同环境,自动转换请求的url地址操作

    一般的项目环境分为:本地环境,测试环境,预发环境,正式环境. 这些环境的域名一般是一样的, 前端请求接口的url也会随着这些环境的变化而改变,手动修改有点麻烦,所以想个办法,让请求的地址根据域名改变而改变. 第一步: 建立一个RequestConfig.js 作为配置文件,内容如下: const APIMapping = { project1: { test: 'http://123.com', local: 'http://abc.com' }, project2: { test: 'http

  • Vue 2.0 中依赖注入 provide/inject组合实战

    用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件得资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和inject需要配合使用,它们的含义如下: provide        ;一个对象或返回一个对象的函数,该对象包含可注入起子孙的属

  • 解决vue init webpack 下载依赖卡住不动的问题

    有时候下载依赖的时候网速不行,这时候我们选择手动下载依赖 有时候下载依赖的时候网速不行,这时候我们选择手动下载依赖:选择 No,I will handle that myself 生成完项目之后,再cd进入项目文件夹,然后再npm install 安装即可. 但是如果真的安装"个把"小时也没成功那就用:cnpm install 吧 如果安装过程中等待太久,我们难免会不耐烦,所以会中途关闭项目.那么我们接下操作 npm run dev 肯定是报错的 正确做法:cd进入项目文件夹,然后再n

  • Vue如何使用cdn加载资源加快打包速度

    Vue如何使用cdn加载资源加快打包速度

    目录 为什么使用CDN 解决方法 使用CDN主要解决两个问题 具体步骤 资源引入 打包对比 附:vue项目常用的cdn地址 总结 为什么使用CDN Vue项目打包的时候,默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大.如果使用cdn的话,会更利于程序的加载速度. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验. 解决方法

  • vue.js父组件使用外部对象的方法示例

    最近在碰到有同学问我,vue父组件怎么使用外部对象,具体例子如下: 有组件a: <div @click="onClick">component a</div> // componet a ... methods: { onClick(evt) { // doSomething 这里只能拿到 mouseEvent this.outsideClickHandler(evt); // 调用外部处理函数 } } ... 有组件B,引用组件a,并传入outsideClic

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

  • vue 本地服务不能被外部IP访问的完美解决方法

    解决 webpack-dev-serveri 启动后通过外部访问报错 invalid host header 修改 config/index.js 的 host 属性为 '0.0.0.0' { // ..., host: '0.0.0.0', port: 8080, // ... } 修改 build/webpack.dev.conf.js 的 devServer 配置 增加 disableHostCheck = true devServer: { clientLogLevel: 'warnin

  • vue 使用外部JS与调用原生API操作示例

    vue 使用外部JS与调用原生API操作示例

    本文实例讲述了vue 使用外部JS与调用原生API操作.分享给大家供大家参考,具体如下: vue 使用外部JS 概要 在开发时我们会经常需要使用到外部的JS,这样我们需要引入外部js,然后进行使用. 实现方法 我们在开发的过程中需要使用到 sha256 将用户的密码进行加密传输. 我们对js进行一点点改造. function sha256_digest(data) { sha256_init(); sha256_update(data, data.length); sha256_final();

  • vue cli3.0打包上线静态资源找不到路径的解决操作

    项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

随机推荐