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

页面切换到默认显示顶部 方法一 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动. 在路由配置中使用scrollBehavior scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }

原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下. 技术要点 Vue,history模式 常见问题及说明 debug模式下报false 这个没得说,就是调用wx.config方法的参数错误造成的,请确认以下事项: 是否成功绑定了域名(域名校验文件要能被访问到) 使用最新的js-sdk文件

效果图: 当然,如果使用iview组件,组件也会对应切换语言. 这里,假设已经用vue-cli脚手架创建了项目,熟悉vue-router,而且已经引入了iview UI. 第一步: 我们在main.js引入vue-i18n import VueI18n from "vue-i18n"; 在main.js目录下新建一个language文件夹,里面分别新建3个文件en-US.js.zh-CN.js.zh-TW.js文件,来存放不同语言的文字.分别加入如下代码: en-US.js modul

因项目需要,需要使用多语言,特此记录使用方法. 第一步:安装vue-i18n npm install vue-i18n 第二步:在生成的i18n文件夹中的index.js里引入vue-i18n 第三步:依旧在i18n文件夹中的indx.js文件里实例化,并且设置默认语言 第四步:挂在到vue的实例中 在这里需要注意在挂载之前需要引入一下 第五步:准备一些多语言资源. 我的做法是在生成的i18n文件夹里新建一个lang文件夹专门来存放多语言json文件.如下图: 之后我们就可以方便的实时更改语言文

vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的个人站点就准备先创建项目. 然后就出现了一系列问题,可能是很久没用吧,太生疏了,之前又不小心把环境变量删除了,结果各种不是内部或外部命令. 这里要说的问题就是一个让我很不爽的问题: I  Your application is running here: http://localhost:8080

网站的语言切换功能大家都见过不少,一般都是一个下拉框选择语言,如果让我们想一下怎么实现这个功能,我相信大家都是有哥大概思路,一个语言切换的select,将当前的选择的语言存在全局,根据这个语言的key去使用相应语言的配置文字.最近接到这个需求,就去搜了搜react相关的插件,网上大佬们好像主要是提到有三种,react-il8next,react-intl以及react-intl-universal,写了个demo项目都试了一下.我们这里还用到了高德地图,相关语言配置查了一下官网有api可以配置,

一般来说项目开发到后期都需要做各种兼容性处理例如:360.IE9以上.QQ浏览器....等等 那么现在来介绍一个工具 babel-cli 跟 babel-preset-es2015 babel-cli 在项目中安装好这两个依赖 npm install -save babel-cli npm install --save-dev babel-preset-es2015 babel-cli 然后找到vue项目根目录下 .babelrc

在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clientWidth, desW = 1440, htmlFont = winW / desW * 100; window.htmlFont = htmlFont; document.documentElement.style.fontSize = htmlFont + 'px'; })() 浏览器的兼容性之Ma

转载:https://blog.csdn.net/qq_24956515/article/details/77527668 Vue项目部署到服务器后,通常除IE浏览器外其他都正常,而IE浏览器会报这么个问题 因为Vue使用了ES6 Promise,而IE浏览器不支持,解决方法是: 使用babel-polyfill转换 https://babeljs.io/docs/usage/polyfill/ npm install --save-dev babel-polyfill 1 如果使用vue-cl

Android项目开发过程中,容易出现缺少对应中英文翻译的情况,这个Python脚本是用于检查字符串是否缺少了对应的翻译 #!/usr/bin/env python # encoding: utf-8 import os, sys, getopt import xml.dom.minidom import subprocess from xml.dom.minidom import Node # 判断是否是App项目依据 Axml='AndroidManifest.xml' res_en_str

问题:     vue项目在ie11下一片空白并报Symbol 未定义的错 原因:     ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript).但是Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API ,比如 Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Pr

vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候需要阻止浏览器的返回. 用法:https://github.com/WangMaoling/vue-prevent-browser-back

最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机

使用代码编辑器打开vue项目代码,在config文件夹里面找到index.js 将里面的:autoOpenBrowser: false, 修改为 :autoOpenBrowser: true, 这个方法是使用于vue-cli2.x 之后(包含vue-cli2.x)的版本 还有一个方法可以实现输入npm run dev之后在浏览器自动打开,这个方法是没有版本限制的,适应目前的所有版本. 在vue项目的 package.json 文件下 修改 scripts 中 dev 的命令 最后面加上 --op

1.安装插件:npm install vue-i18n  --save 2.src下新建i18n文件夹, i18n文件夹下创建langs文件夹和i18n.js文件 langs文件夹下创建cn.js; en.js; index.js 如图: 3.  i18n.js: import Vue from "vue"; import locale from 'element-ui/lib/locale' import VueI18n from "vue-i18n"; impo

大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroyed,可以判断出是否还在当前生命周期中,true为不在,false为还在: 今天要说的是在浏览器打开新窗口的情况下将上一页面的定时器清空: 代码如下: export: { methods: { /*** *定时器刷新接口 * */ timeRefresh(){ if(this.isLeave) ret

0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h5的sessionStorage和localStorage也可以存在这里面) ( 3 ) 设置 title (1)从路由router里面得到组件的title 在 router.beforeEach((to, from, next) => {} 里面 const browserHeaderTitle

上篇 IOS APP 国际化(实现不跟随系统语言,不用重启应用,代码切换stroyboard ,xib ,图片,其他资源 介绍了纯代码刷新 实现程序内切换语言. 但效率底下,也存在一些问题.暂放弃. 第二种是 从跟视图切换 storyboard 实现 代码结合 storyboard 刷新 UI, 上篇遗留的问题是,在开发的时候我们要用到 base.lproj 和 对应语言下得.string 文件. 方便开发(脚本实现 base storyboard 被编辑会 自动刷新对应语言的.string 文

最近在拉取Vue项目时总是会出现webstorm内存瞬间爆满,导致webstorm卡死,而且,有时在下载完node_modues后webstorm一直处于updating中,为此在网上找了很多方法结果效果不怎么理想,然后自己就接着捣鼓,终于捣鼓出来了.下面就是方法: 1.打开webstorm,然后依照此路径(files->settings->editor->File Types->ignore files and folders)打开在其输入框中添加"node_modul

前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper 做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事. 假如你正准