发现部署问题

在部署的时候发现打开的页面是空白

之前部署原理

之前的页面都是作为静态文件形式打包上传到服务器上

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路由的服务器部署问题的更多相关文章

  1. Vue.js项目在apache服务器部署后,刷新404的问题

    原因是vue-router 使用了路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = n ...

  2. nodejs服务器部署教程一

    第一篇教程紧紧让你输出一个hello world 环境介绍 服务器环境:ubuntu(16.04)64位 本地环境:windows10 64位 连接工具:mobaxterm ubuntu安装和基本配置 ...

  3. 在nginx上部署vue项目(history模式);

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  4. 在nginx上部署vue项目(history模式)--demo实列;

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  5. vue cli3项目发布在apache www/vue目录下并配置history路由

    注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...

  6. win10系统本地iis或nginx服务器部署vue.js项目

    1.前端框架一般依赖node.js,我们首先要安装node.js.请参考: http://www.cnblogs.com/wuac/p/6381819.html to:安装好node.js后npm也安 ...

  7. hash和history路由的区别

    在了解路由模式前,我们先看下 什么是单页面应用,vue-router  的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...

  8. 告别 hash 路由,迎接 history 路由

    博客地址:https://ainyi.com/69 三月来了,春天还会远吗.. 在这里,隆重宣布本博客告别 Vue 传统的 hash 路由,迎接好看而优雅的 history 路由~~ 映照官方说法 v ...

  9. vuejs如何在服务器部署

    title: vuejs如何在服务器部署 date: 2017-10-31 20:41:03 tags: [vue] --- 上传到网站服务器 Vue 是一个 javascript 的前端框架,它是运 ...

随机推荐

  1. 瑞幸咖啡还是星巴克,一杯下午茶让我明白 设计模式--模板方法模式(Template Method Pattern)

    简介 Define the skeleton of an algorithm in an operation,deferring some steps to subclasses.Template M ...

  2. python——random.sample()的用法

    写脚本过程中用到了需要随机一段字符串的操作,查了一下资料,对于random.sample的用法,多用于截取列表的指定长度的随机数,但是不会改变列表本身的排序: list = [0,1,2,3,4] r ...

  3. MySQL 入门(2):索引

    摘要 在这篇文章中,我会先介绍一下什么是索引,索引有什么作用. 之后会介绍一下索引的数据结构是什么样的,有什么优点,又会带来什么样的问题. 在分析完数据结构后,我们可以根据这个数据结构,研究索引的用法 ...

  4. C++中const的特性

    目录(作用): 1:修饰变量,说明该变量不可以被改变: 2:修饰指针,分为只想常量的指针和自身是常量的指针 3:修饰引用,指向常量的引用,用于修饰形参,即避免了拷贝,有避免了函数对值的修改: 4:修改 ...

  5. thinkphp-getshell Bypass

    年前写的了,做测试用,主要利用 session getshell 或者thinkphp 的log  //勿用attack  测试 import requests import time import ...

  6. 软件——IDEA中如何去掉警告虚线

    初次安装使用IDEA,总是能看到导入代码后,出现很多的波浪线,下划线和虚线,这是IDEA给我们的一些提示和警告,但是有时候我们并不需要,反而会让人看着很不爽,这里简单记录一下自己的调整方法,供其他的小 ...

  7. [hdu4497]分解质因数

    题意:求满足gcd(x,y,z)=G,lcm(x,y,z)=L的x,y,z的解的个数. 大致思路:首先如果L % G != 0那么无解,否则令u = L / G,问题变为,gcd(r,s,t)=1,l ...

  8. thread模块—Python多线程编程

    Thread 模块 *注:在实际使用过程中不建议使用 thread 进行多线程编程,本文档只为学习(或熟悉)多线程使用. Thread 模块除了派生线程外,还提供了基本的同步数据结构,称为锁对象(lo ...

  9. AJAX三

    三.ajax 4.代参数的get方法 ①服务器 ②ajax代码 xhr.open("get",url,true) url="/demo/get_login?uname=& ...

  10. Jenkins-gogs安装及使用

    很多同学可能第一次了解什么是ci-cd,什么是Jenkins,首先会介绍下cicd的概念及应用场景,之后再详细介绍下Jenkins的概念.安装及使用. 什么是CI-CD? 首先明确CI-CD是一种技术 ...