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模式会出现的问题咯。