此方案只能用于开发环境，线上最好设置同源策略（遇到个后端,装你妈批） 前后端不在同一服务器的情况下，前端要访问后端API，可通过在vue.config.js中配置代理服务器。 0：前提条件 1：安装vue-lic 2：安装axios 用于发送请求。 1：将任何未知请求转发到代理服务器 如： 前端地址：127.0.0.1 后端地址：127.0.0.2 当访问地址为 127.0.0.1/api，没有匹配到这地址，那么就会被转发到代理服务器127.0.0.2/api module.exports={devSer...
<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L] </IfModule>nginx配置 location / {try_files $uri $uri/ /index.html; }vue history模式下nginx配置 服务端nginx的一开始配置如下（假设域名为：xx.xxx.com）： [***** ~]# cat /Data/app/nginx/conf/vhosts/xx.xxx.com.conf server...
前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象，本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑，chrome浏览器无卡顿现象，其它浏览器并未测试，如遇到卡顿请备注系统和浏览器，方便我后续优化，谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿，而且每个单元格点击可以编辑，支持固定头和固定列项目源代码地址 Github (本地下载)解决问题核心点：横...
随着各大前端框架的诞生和演变，SPA开始流行，单页面应用的优势在于可以不重新加载整个页面的情况下，通过ajax和服务器通信，实现整个Web应用拒不更新，带来了极致的用户体验。然而，对于需要SEO、追求极致的首屏性能的应用，前端渲染的SPA是糟糕的。好在Vue 2.0后是支持服务端渲染的，零零散散花费了两三周事件，通过改造现有项目，基本完成了在现有项目中实践了Vue服务端渲染。 关于Vue服务端渲染的原理、搭建，官方文档已经讲的...
什么是骨架屏？ 简单的说，骨架屏就是在页面未渲染完成的时候，先用一些简单的图形大致勾勒出页面的基本轮廓，给用户造成页面正在加载的错觉，待页面渲染完成之后再用页面替换掉骨架屏，从而减少页面白屏的时间，给用户带来更好的体验。分析VUE渲染过程 使用vue-cli3.0创建项目： vue create project 在生成的项目文件夹下的public文件夹下的index.html文件代码如下： <!DOCTYPE html> <html lang="en"><head><meta ch...
原始 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 跳转而无须重新加载页面。（需要特定浏览器支...
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，目前在GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的介绍。 Vue.js 是我在2014年2月开源的一个前端开发库，通过简洁的 API 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，目前在 GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的...
网上流行的解决方案是将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仅需调用一次，...
一、方法一：rem 布局在主入口：index.html，<head> 标签内添加如下JS 代码：（实现在标准 375px宽度适配下，100px = 1rem。）<script>(function () {// 在标准 375px 适配下，100px = 1rem;var baseFontSize = 100; var baseWidth = 375;var set = function () {var clientWidth = document.documentElement.clientWidth || window.innerWidth;var rem = 100;if (clientWidth != baseWidth) {rem = Math.floor(clientWidth / base...
前言：最近用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...