原始 build/untils.js原因：至于为什么背景图有的打包后存在，有的丢失，那是因为vue会把图片转成base64,但是图片大小超过阈值就不转了，直接引，而背景图片里用的是相对路径最后会直接替换成static，但是明显路径会有问题，所以得配置下。 修改 需要在上面红框中添加下面语句： // 背景图片丢失：写改css中的路径(添加) publicPath: ../../ 然后重新npm run dev即可 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家...
写在前面Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，hash 的值为 #/hello。特点：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端不会产生什么影响，改变 URL 不会重载页面。history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，来完成 URL 跳转而无须重新加载页面。（需要特定浏览器支...
网上流行的解决方案是将assetsPublicPath: /改成./，下面说一下这个解决方案的弊端： 通常页面空白的问题出现大多数是由于Spring Boot端配置了server.servlet.context-path，上下文改变了css, js等文件的访问路径，文件无法加载导致index.html显示空白。/改成./是将绝对路径变为相对路径，可以动态适应Spring Boot端上下文的改变，这是为什么这个解决方案起作用的原因。 Vue项目部署在Spring Boot出现的另一个常见问题是当刷新浏览...
背景手机型号：型号：iphone 7 / iphone xs max 版本：ios 10.3.1 / ios 12.1 微信版本：WeChat 6.7.3问题还原：Vue应用(vue-router)上使用history模式，在某个页面内调用微信JSSDK相关API，如扫码、分享等，使用当前页面URL总会出现签名错误(invalid signature)，导致API调用失败。问题根源Vue-Router进行路由切换的时候，总是会操作浏览器的历史记录，从而响应页面URL变化。 在JSSDK文档页面有这么一句话:同一个url仅需调用一次，...
前言：最近用vue-cli 3.0 构建一个小型的工单管理系统，完工后build发现一个chunk-vendors包就达到985kb，加上其他一些资源文件，首页的下载总共大小快要2M。测试给的第一个反馈就是首屏慢慢慢慢慢！ 根据首屏加载资源文件过大，进行一下优化： 1. 路由懒加载结合Vue的异步组件再结合webpack的代码分割，我们可以轻松的实现路由懒加载。 vue-cli 3.0 模式就使用了Babel，我们需要添加 syntax-dynamic-import 插件，才能使 Babel 可...
在做的项目是使用 vue-cli 脚手架为基础的，只能使用微信浏览器打开的。在某次更新功能代码后，被反馈在一些手机上会出现白屏。经过一番探索，多管齐下解决了问题白屏可能的原因： es6 代码没有被编译成 es5 ；文件打包路径错误；运营商塞入的广告 js 服务器报错，连累项目不能下载资源；针对 1 和 2 ，分别采取以下做法： 解决位置：config/index.js 文件：把 assetsPublicPath: / 改为assetsPublicPath: ./ build: {assetsPublic...
表现 设置了scroll-top的scroll-view组件，在组件所在vue实例data发生改变时会自动回弹到最上方 解决方案 打开 node_modules/mpvue/index.js, 在任意位置添加以下两个方法 function calcDiff(holder, key, newObj, oldObj) {if (newObj === oldObj || newObj === undefined) {return}if (newObj == null || oldObj == null || typeof newObj !== typeof oldObj) {holder[key] = newObj} else if (Array.isArray(newObj) && Array.i...
在解决问题之前，我们先来了解下 vue响应性原理： Vue最显著的一个功能是响应系统-- 模型只是一个普通对象，修改对象则会更新视图。受到javascript的限制，Vue不能检测到对象属性的添加或删除，因为vue在初始化实列时将属性转为getter/setter，所以属性必须在data对象上才能让vue转换它。但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上：如下代码: Vue.set(obj, _isHover, true);或者可以使用vm.$s...
vue.js 组件 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块，并且只在需要的时候才从服务器加载一个模块。 但是这种解决方案也有其问题，当网络环境较差时，我们去首次访问某个路由模块，由于加载该模块的资源需要一定的时间，...
vw 解决方案1. 安装并配置PostCss插件代码如下:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S2. 对 PostCss 进行配置找到在根目录中的.postcssrc.js，对PostCSS插件进行配置 module.exports = {"plugins": {"postcss-import": {},"postcss-url": {},// to edit target browsers: use "browserslist" field in package.json"postcss-write-svg": ...
关于Vue中路由使用history模式，开发微信H5页面分享时在安卓上签名有效成功，但是在IOS设备上一直报错签名失效问题 问题描述:在Vue开发过程中，路由使用History模式下，在使用微信分享时，在微信开发者工具上一切正常。在安卓上一切正常。 但是！！！在IOS上反复报签名错误。 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号，接着下面分享出来自定义内容是安卓分享正常,话不多说上图！！！！我的代码:需求描述...
微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份.微信授权登录的机制这里不做详述,微信官方文档已有详述,简述就是通过跳转微信授权的页面,用户点击确认后,微信会跳到回调页面,此时回调页面url上会携带code参数,通过code参数,后端可以拿code换取拥护openid,或者用户信息 在vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通...
前言背景情况 vue - 2.5.11vue-cli 使用模板 webpack-simplehttp请求：axiosVue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+，即是 ie9 及更高的版本。经过测试，Vue 的核心框架 vuejs 本身，以及生态的官方核心插件（VueRouter、Vuex等）均可以在 ie9 上正常使用。 Vue 的作者尤雨溪对于Vue 的学习建议 中有提及为了将项目更好的生态化/工程化，要尽可能学习及使用新的 ECMAScript 规范。目前 ES6/ES2015 是可用度和稳定度较高的...
方法 后台更改header使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）Jquery jsonp后台更改header header(Access-Control-Allow-Origin:*);//允许所有来源访问 header(Access-Control-Allow-Method:POST,GET);//允许访问的方式使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） 打开config/index.js,在proxyTable中添写如下代码： proxyTable: { /api: { target: 填写请求源地址, //源地址 chan...
遇到的问题 使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错。 在网上查找了一下，原来是HTML5 History 模式引发的问题，具体为什么，vue官方已经给出了解释，你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了，官方给出的解决方案中没有说tomcat下，怎么决解。 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的候选资源...