vue.js路由問題在apache

我有一個vue.js應用程序與vue路由器呈現各種組件。我有一個加載家庭組件的路徑/home。在開發環境中，我可以通過在地址欄中輸入localhost:8080/home並使用<router-link>來設置鏈接來訪問組件。當我將生產版本部署到apache服務器時，當我給localhost/home發出錯誤vue.js路由問題在apache

在此服務器上找不到請求的URL/home。

但鏈接工作，localhost/home在地址欄顯示，當我們點擊鏈接爲什麼出現這種情況呢？如何解決這個問題？

來源

2017-05-25 LJP

在路由器實例中，我使用了歷史模式，該模式給出了一個沒有散列（＃）的URL。我將模式窗體'歷史'更改爲默認'散列'，它解決了我的問題。

來源

2017-05-25 06:42:40 LJP

你能否詳細說明你的解決方案多一點？ –

直接從Vue路由器網站。

的VUE路由器默認模式爲散模式 - 它使用URL散列模擬一個完整的URL，這樣的頁面將不會在URL 發生變化時重新加載。

爲了擺脫散的，我們可以使用路由器的歷史模式，利用了history.pushState API實現網址導航不重新加載頁面：

常量路由器=新VueRouter（{模式： 'history'，routes：[...]}）使用歷史記錄模式時，URL將顯示爲「正常」，例如 http://oursite.com/user/id。美麗！

又來了一個問題，雖然：由於我們的應用程序是一個單頁客戶端應用程序，沒有適當的服務器配置，如果他們直接在他們的瀏覽器訪問http://oursite.com/user/id的用戶將獲得一個 404錯誤。現在這很醜陋。

不用擔心：要解決該問題，您只需將簡單的全備回退路線添加到您的服務器。如果該網址與任何靜態資產都不匹配，則該網址應該與您的應用所在的index.html頁面保持一致。再次美麗！

阿帕奇
<IfModule mod_rewrite.c> 
    RewriteEngine On 
    RewriteBase/
    RewriteRule ^index\.html$ - [L] 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteRule . /index.html [L] 
</IfModule> 
nginx的
location/{ 
    try_files $uri $uri/ /index.html; 
} 
本土的Node.js
const http = require('http') 
const fs = require('fs') 
const httpPort = 80 

http.createServer((req, res) => { 
    fs.readFile('index.htm', 'utf-8', (err, content) => { 
    if (err) { 
     console.log('We cannot open "index.htm" file.') 
    } 

    res.writeHead(200, { 
     'Content-Type': 'text/html; charset=utf-8' 
    }) 

    res.end(content) 
    }) 
}).listen(httpPort,() => { 
    console.log('Server listening on: http://localhost:%s', httpPort) 
}) 

[0] https://router.vuejs.org/en/essentials/history-mode.html

來源

2017-12-01 23:30:14 Speakeasys

vue.js路由問題在apache

回答

相關問題