> vue-router路由模式為history，導致的問題 **問題一，背景圖片路徑問題：** 解決方案也很簡單，當然這并非唯一解決的方案 ``` // build/utils.js if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:"../../", // 添加上這個路徑，當然根據你自己的路徑不同而不同，這是默認狀態下的路徑 fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } ``` 再次`npm run build`，試試看 ***** **問題二，刷新404，為什么，因為本地路徑中沒有這個真實資源存在，這些訪問資源都是在js里渲染的。我們只需要在服務器配置如果URL匹配不到任何靜態資源，就跳轉到默認的index.html：** * nginx服務器下 ``` server { listen 8089; // 端口 server_name localhost; // 訪問地址，默認是本機 location / { try_files $uri $uri/ @router; // 需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404 index index.html index.htm; } // 對應上面的@router，主要原因是路由的路徑資源并不是一個真實的路徑，所以無法找到具體的文件 #因此需要rewrite到index.html中，然后交給路由在處理請求資源 location @router { rewrite ^.*$ /index.html last; } ``` *記住修改配置后一定要重啟`Nginx`服務器，否則無效，`Nginx`相關命令， 自行百度* 這里的配置意思是將所有的文件都指向Index.html文件 ***** * IIS服務器下 相信大家都知道在IIS下解決Vue單頁面應用404的方法是使用URL Rewrite，把所有的請求都轉到/index.html中。 1. 安裝： 如果IIS中有*Web平臺安裝程序*那么打開，在里面搜索*url重寫*安裝、添加就可以了。沒有的話，獨立下載[URL Rewrite](https://www.iis.net/downloads/microsoft/url-rewrite)工具。*安裝完成后，重新打開IIS*，防止沒有"URL重寫"選項 1. 在你的網站根目錄中創建一個 web.config.xml 文件，內容如下： ``` <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Handle History Mode and custom 404/500" stopProcessing="true"> <match url="(.*)" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration> ``` 給個警告，因為這么做以后，你的服務器就不再返回 404 錯誤頁面，因為對于所有路徑都會返回 index.html 文件。為了避免這種情況，你應該在 Vue 應用里面覆蓋所有的路由情況，然后在給出一個 404 頁面。 接下來是Vue路由中的配置： ``` import NotFoundComponent from '@/views/no-found' { path: '*', component: NotFoundComponent } ``` ***** > 至此，IIS下的配置已完成，隨便刷新都不會出現404的錯誤了，O(∩*∩)O哈哈~好開心，做飯去了...另外，其它服務器我沒有親測過，如果你們有什么問題的話，可以給我留言，我會幫忙解答，O(∩*∩)O哈哈~ [參考博客 - 王云飛的簡書](https://www.jianshu.com/p/9705040243f2)