2017-05-28 98 views
1

我已經使用Vue.js和他們的vue-cli webpack構建了一個簡單的應用程序。vue-router和Express

我用vue-router來控制站點周圍不同視圖的導航。這在本地運行時可以正常工作。

我現在想將這部署到Heroku上,但是這些網址不再有效。我嘗試過實施中間件,但碰到了磚牆!

我正在尋找可能導致我沿着正確的方向來配置node.js/express來正確運行應用的東西。

非常感謝,

詹姆斯

+0

你加'模式:歷史'在你的路由器中,你配置了你的服務器。看到這裏(https://router.vuejs.org/en/essentials/history-mode.html)配置Node.js(Express) –

+0

我做過。所以當在本地運行時,localhost:4444上的「npm run dev」,它可以很好地工作。在Heroku上運行時,我得到主頁,但是當加載任何其他頁面時,我得到「CAN NOT GET/login」。 –

+0

即使在配置好服務器之後? –

回答

4

對於那些在類似的情況,現在正在使用:

const express = require('express'); 
const history = require('connect-history-api-fallback'); 
const app = express(); 

const staticFileMiddleware = express.static(__dirname); 
app.use(staticFileMiddleware); 
app.use(history({ 
    disableDotRule: true, 
    verbose: true 
})); 
app.use(staticFileMiddleware); 

const port = 5555; 
app.listen(port,() => { 
    console.log(`Example app listening on port ${5555}!`); 
}); 

您可以瞭解更多關於connect-history-api-fallback

+0

好的,你通過引用鏈接提供了一個答案。這將有助於任何未來的用戶有同樣的疑問 –

+0

靜態中間件_is_實際上需要兩次:一次是爲了防止靜態文件從404開始,然後在'history'重定向之後再次解析'index.html'。並且請注意,這必須在定義其他快速路線後完成。 – spiffytech