Vue專案History模式404問題解決

本文主要解決vue專案使用history模式發布到伺服器nginx上重新整理頁面404問題。（由於每個專案的情況都不盡相同，本方案已經完美解決本在所使用專案，具體情況可能還需要修改。）

首先看看專案打包後檔案內容，看看有沒有什麼能突破的地方。檔案目錄如下：

打眼一看可以發現，主要的可能就是這個index.html檔案，內容如下：

既然大致思路都有了，那麼就開始嘗試去解決一下。

修改webpack.config.js檔案，這個是vue-cli打包檔案配置，使其打包後讓index.html檔案引用路徑為絕對路徑。webpack.config.js內容如下（每個專案打包配置均不同，這個配置僅僅是我使用的專案）：

const resolve = require('path').resolve
const webpack = require('webpack')
const htmlwebpackplugin = require('html-webpack-plugin')
const url = require('url')
const publicpath = '/'
module.exports = (options = {}) => (,
output: ,
module: ,,,
}]}]},
plugins: [
new webpack.optimize.commonschunkplugin(),
new htmlwebpackplugin()
],resolve: ,
extensions: ['.js', '.vue', '.json', '.css']
},devserver: }},
historyapifallback: 
},devtool: options.dev ? '#eval-source-map' : '#source-map'
})

再次打包後，檢視index.html，內容如下：

從index.html可以看出已經變成了絕對路徑。

修改nginx.conf配置檔案，**如下：

## 攔截帶有tms-monitor的請求，例如http://localhost/tms-monitor/admin

location ^~/tms-monitor

}#error_page 500 502 503 504 /50x.html;

location = /50x.html }}

上述配置完成後，打包vue專案，重啟nginx再次重新整理就不會在有404的現象了。（再次申明：以上只是針對本人所在的專案，不一定使用所有情況。）

Vue路由配置history模式

我的部落格你可以用 script 標籤的形式引入vue.min.js 這樣的，不需要nodejs。使用node有幾件事，打包部署，解析vue單檔案元件，解析每個vue模組，拼在一起，轉碼es6，less等，啟動測試伺服器 localhost 8080,幫你管理 vue router等外掛程式。所以...

vue路由history模式配置

本篇文章給大家帶來的內容是關於vue路由history模式重新整理頁面時出現404問題的兩種解決方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。vue hash模式下，url中存在用 history 模式就能解決這個問題。但是history模式會出現重新整理頁面後，頁面出現40...

Vue專案History模式404問題解決

Vue路由配置history模式

vue路由history模式配置

Vue路由配置history模式

相關推薦