vue : history模式与项目部署的爬坑

需求:url不能有#符号,且不放在服务器虚拟主机的根目录. 假设放在虚拟主机的 medicine 文件夹下. 需要改两个文件,一个是 ./config/index.js (vue设置文件) ,另一个是 ./src/router.js (vue-router设置文件). ./config/index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for docu…

Tomcat 配置Vue history模式

Tomcat 配置Vue history模式近日 , 在使用 Tomcat 部署Vue项目时 , 刷新项目出现404的异常 . 原因是 Vue使用了history模式 , 而tomcat没有相关配置 1.Vue项目添加文件夹 WEB-INF , 在此文件夹中添加文件: web.xml 2.web.xml文件内容如下: <?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="…

SSM 项目从搭建爬坑到 CentOS 服务器部署 - 速查手册

SSM 项目从搭建爬坑到 CentOS 服务器部署 - 速查手册提示: (1)CSDN 博客左边有操作工具条上有文章目录 (2)SSM 指 Spring,Spring MVC,MyBatis Maven 的 pom.xml 配置合集提示: 如果想查看当前最新版本,可以拷贝 xml 注解中的链接基础配置: fastjson 1.2.54 spring-webmvc 5.1.4 spring-jdbc 5.1.4 mybatis 3.4.6 mybatis-spring 1.3.2 mysql…

vue history模式 ios微信分享坑

vue history模式 ios微信分享坑问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享时会刷新当前的url,而苹果不会,苹果是通过历史记录进来的,不会刷新url所以会导致签名失败解决方法 beforeRouteEnter(to, from, next) { // XXX: 修复iOS版微信HTML5 History兼容性问题 if (to.path !== location.pat…

vue history 模式打包部署在域名的二级目录的配置指南

最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash 模式后面带#,打包的时候只需要把绝对路径(/)换成相对对路径(./),就可以部署在任何地方,不需要服务器配合,但是不好看,所以我们一般选择history 模式,但是history 模式需要配合服务器的部署. 本文主要是在vue-cli3版本下,对部署在域名的二级目录下做四处的配置: 1. vue-r…

vue cli 3.x 项目部署到 github pages

github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g…

vue+django前后端项目部署

一.python3的安装 1.安装python前的库环境: yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel -y 2.下载,解压安装源码包 wget https://www.python.…

vue history模式下出现空白页情况

问题描述: vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: import Vue from 'vue'; import App from './App'; import routers from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = ne…

vue history模式 ios微信分享踩过的坑

背景:教育项目,整体依赖于微信环境,涉及到微信分享.微信二次分享问题:vue使用history模式在iso微信下分享设置出错(签名认证错误.分享设置失败) 问题发现路径 1.按照微信公众号官方文档设置微信分享,ios真机测试,第一个进入页面分享设置成功. 2.使用vue router跳转到第二个页面后在分享时,分享设置失败,刷新页面后分享正常. 3.打开微信jssdkdebug模式 4.发现在router跳转后的第二个页面,签名失败(invalid signature) 解决路径: googl…

记一次项目使用webuploader爬坑之旅

因前端页面开发使用的为VUE开发,又要支持IE9,遂只有基于webuploader封装一个上传组件.地址:https://github.com/z719725611/vue-upload-web,现在版本比项目中的组件版本要低,后期会更新npm版本. webuploader使用html上传,如果低版本就是用flash上传,上传原理就不一一描述了,感兴趣的同学可以到webuploader官网查看. 使用html上传,如谷歌,IE11等基本上并没有什么问题,但是IE9使用fl…

解决vue项目route使用history模式，tomcat部署刷新url 404问题

在webapps/项目名创建WEB-INF ,创建web.xml文件文件内容如下: <?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation…

Vue history模式支持ie9

vue 路由里面的history能让浏览器显示平常一样的链接,可以去掉#这种,但是在ie9下面会强制变成hash,因为history不支持ie9自动降级,可能就会影响美感,解决:可以在路由里面添加fallback,fallback默认是true,可以让这个属性变成false,在ie9下面也能去掉#,但是router-link跳转会刷新页面…

vue history模式下的微信分享

// 微信验证 export function requireConfig() { let url = window.location.href systemApi.wxoption({ url: url }).then(res => { if (res.code === 200) { wx.config({ debug: false, appId: res.data.appid, // 必填,企业号的唯一标识,此处填写企业号corpid timestamp: res.data.timestam…

vue history模式

注意: 1.前端:config.js路径问题 2.后台:配置nginx…

vue history模式 apache配置

我的服务器apache 版本是2.4.6 看文档上面说加那些代码,但是加上去重启服务器就不能重启,显示代码错误,然后百度查开启mod_rewrite这个重写URL 弄了半天也不会,百度上面的不知道是不是和我的服务器不一样,都没用,(#LoadModule rewrite_module modules/mod_rewrite.so )这段代码一直没找到,最后是设置了404错误页面(ErrorDocument 404 /index.html)把前面的#去掉,错误就返回index.html就行了,刷新…

vue history模式下的微信支付，及微信支付授权目录的填写,处理URL未注册

微信公众号配置网页授权域名:填写网址域名微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/pay/ 访问url:http://www.baidu.com/pay 支付授权目录:http://www.baidu.com/ 访问url:http://www.baidu.com/pay/ment?id=123 支付授权目录:http://www.baidu.com/pay/ / 记得加上 wx.…

vue 中生成二维码之爬坑之路

最近在做vue中项目,有个需求是在你提交信息后把后台返给你的链接生成二维码. 一共使用了两种生成二维码的方法 1.vue-qr 这个是在一进入页面直接生成二维码,具体介绍见文档:https://www.npmjs.com/package/vue-qr; 2.qrcode 这个可以,符合我的要求 tempalte: <canvas id="canvas" ></canvas> script: 引入: import VueQr from 'qrcode' 组件: c…

centos部署yapi爬坑记

前言这几天终于完成了为期三个月的公司某个demo版的项目,在这期间和公司的后台因为API的事怼过无数次了,'我的接口没问题,是你请求的方式不对吧!'.'一定是你请求的参数不对'......诸如此类问题贯穿这三个月,仅仅因为我们没有一个良好的接口管理习惯,一堆省事的工具没有被利用起来,接口定义很随意基本靠口头传达.于是乎,我想YApi接口管理平台必须先用起来,再者,张鑫旭大大也在为接口管理打call,前端也应该把工具用起来.解放生产力,提高效率! 安装node 因为yapi的安装必须依赖node…

Windows环境下flask+Apache+mod_wsgi部署及爬坑

文章目录安装python Windows 环境使用virtualenv和virtualenvwrapper 安装mod_wsgi 安装nginx 安装Apache 遇到的坑安装Apache遇到的坑安装mod_uwsgi的坑在这个网站上找到编译好的包进行安装, 安装python 下载相应的安装包python-3.6.5-amd64.exe,直接双击打开即可一步步安装,非常简单 Windows 环境使用virtualenv和virtualenvwrapper 环境搭建安装virtualen…

Vue中引入静态JS文件（爬坑）

前言(背景介绍) 开发的项目需要与Threejs的3D项目结合在一起,需要静态引入,jquery.js,stats.js,three.js,ThreeBSP.js等静态文件.开发环境是iview-admin2.0.尝试了许多方法,算是填坑了吧.... 1.首先找到项目下的index.html,我的是在public下.如图 2.接着将你要引入的js文件写在index.html里面 tip:1.js文件要放在public下,其他目录无法引用成功.目录的跳级规则还没有找到,与普通跳级方式不同. 2.p…

Laravel+vue实现history模式URL可行方案

项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. hash URL 例如:Vue 使用History记录上一页面的数据. history 模式时,URL就像正常的 url,例如 http://yoursite.com/user/id. 没有特别的要求的话,hash模式亦正常访问.好嘛,产品要求URL要像正常那样的 -- history模式的.看看vu…

【vue : history模式与项目部署的爬坑】的更多相关文章