vue采用history路由的服务器部署问题
发现部署问题
在部署的时候发现打开的页面是空白
之前部署原理
之前的页面都是作为静态文件形式打包上传到服务器上
http://www.xiedashuaige.cn/bolg2.0/#/home
就和这个页面一样,我其实上只有一个页面/bolg2.0
然后前端的路由切换都是根据后面的哈希值来变化
然后不同的哈希值指向的页面还是/bolg2.0页面
所以就放在静态目录都可以访问
部署问题解析
然后我用了history路由后打开的页面页面的时候发现服务器报404
http://www.xiedashuaige.cn/BolgAdmin/admin
首先我在服务器上对应的静态页面是/BolgAdmin页面
但是我前端路由的首页是/BolgAdmin/admin这个页面
但是服务器以为/BolgAdmin/admin是单独的一个页面资源
然后又找不到这个资源,所以就会报404
分析问题
然后我想了两种解决方法
- 一种就是在服务器上设置一个转发,把所有/BolgAdmin下面的子路由全部转发到/BolgAdmin页面下,但是对于服务器的我不太了解
- 通过node写一个后端就像http://www.xiedashuaige.cn:3000一样,然后访问http://www.xiedashuaige.cn:3000/BolgAdmin/admin的页面全部转发到http://www.xiedashuaige.cn:3000/BolgAdmin上面,这样就可以通过node来实现,比使用apache来改应该简单一些,我还在研究中。。
解决问题
正好在学koa就用koa搭建了一个服务器,代码如下
const fs = require('fs')
const Koa = require('koa')
const route = require('koa-route')
const path = require('path')
const static = require('koa-static')
const app = new Koa()
const main = ctx => {
ctx.response.type = 'html'
ctx.response.body = fs.createReadStream(path.join(__dirname, '/index.html'))
}
const toMain = ctx => {
ctx.response.redirect('/admin/')
}
const staticFile = static(path.join(__dirname, '/'))
app.use(staticFile)
app.use(route.get('/', toMain))
app.use(route.get('/admin/*', main))
app.listen(3001)
其实就是搭建了一个静态目录,然后把/目录重定向到/admin目录下,然后把/admin/*目录全部打开index文件
然后这样就可以打开vue history模式的单页面应用了
结语
其实吧最后还是有一个问题,是针对于我这个项目的。我这个项目使用了vue的代理跨域,然后后端是用go写的跑在另外一个端口,所以最后直接把打包后的文件让go来做相同的处理,其实主要是了解了一波history模式会出现的问题咯。
vue采用history路由的服务器部署问题的更多相关文章
- Vue.js项目在apache服务器部署后,刷新404的问题
原因是vue-router 使用了路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = n ...
- nodejs服务器部署教程一
第一篇教程紧紧让你输出一个hello world 环境介绍 服务器环境:ubuntu(16.04)64位 本地环境:windows10 64位 连接工具:mobaxterm ubuntu安装和基本配置 ...
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
- vue cli3项目发布在apache www/vue目录下并配置history路由
注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...
- win10系统本地iis或nginx服务器部署vue.js项目
1.前端框架一般依赖node.js,我们首先要安装node.js.请参考: http://www.cnblogs.com/wuac/p/6381819.html to:安装好node.js后npm也安 ...
- hash和history路由的区别
在了解路由模式前,我们先看下 什么是单页面应用,vue-router 的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...
- 告别 hash 路由,迎接 history 路由
博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...
- vuejs如何在服务器部署
title: vuejs如何在服务器部署 date: 2017-10-31 20:41:03 tags: [vue] --- 上传到网站服务器 Vue 是一个 javascript 的前端框架,它是运 ...
随机推荐
- 2019/2/20训练日记+map/multi map浅谈
Most crossword puzzle fans are used to anagrams - groups of words with the same letters in different ...
- 关于SQL语言,这些你不得不了解!
一.SQL概述 关系数据库标准语言SQL(结构化查询语言). 结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言, ...
- NetCore项目实战篇03---HTTP Patch 更新数据
一.什么是HTPP Patch HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 ...
- Python+wxpy 实现微信消息轰炸
需要导入wxpy,在终端中输入以下命令即可 pip install wxpy 如果没有pip先安装pip,安装好了的直接输入命令即可,安装好了但是显示没有安装的可能是没有将pip添加到PATH中,需要 ...
- [LiDAR数据模拟]系列(2) HELIOS的TLS点云模拟流程
关键词:地基激光雷达 点云模拟 XML文件 作者:李二 日期:07/05/2020 - 08/05/2020 我目前仅仅使用了TLS模式进行模拟,所以先讲一下TLS的模拟经验. ALS和MLS的模拟, ...
- 从零开始学习docker之在docker中搭建redis(集群)
docker搭建redis集群 docker-compose是以多容器的方式启动,非常适合用来启动集群 一.环境准备 云环境:CentOS 7.6 64位 二.安装docker-compose #需要 ...
- VM虚拟机手动配置IP地址
1.查看虚拟机的网关 编辑-->虚拟网络编辑器 VMnet8 NAT模式-->NAT设置-->网关IP 2.设置IP地址 系统-->首选项-->网络连接 system e ...
- linux解压缩tar.gz文件
1.解压缩命令 命令:tar -zxvf 文件名 -z 有gzip属性的 -x 解压 -v 显示所有过程 -f 要处理的文件名 2.压缩命令 命令: tar -zcxf 压缩后的文件名 要压缩的文件名 ...
- 002_python的in,while else,格式化输出,逻辑运算符,int与bool转换,编码
数据 1.什么是数据? x=10,10是我们要存储的数据 2.为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3.数据类型 数字 字符串 列表 元组 字典 集合 ...
- 一文教你快速搞懂 FOC ramp function 斜坡函数的作用和实现
文章目录 定义 程序的实现 matlab 程序 C语言程序 定义 x(t)={0,t<0At,t≥0 x(t) = \begin{cases} 0,t<0\\ At,t \ge 0\\ \ ...