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模式會出現的問題咯。