發現部署問題
在部署的時候發現打開的頁面是空白
之前部署原理
之前的頁面都是作為靜態文件形式打包上傳到服務器上
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模式會出現的問題咯。