Vue history路由模式 apache配置上線

1. 首先在vue項下的router.js 文件配置 mode為history模式，並且設置好對應的base選項

說明：base配置為你當前項目實際上線時所在的目錄文件夾， 我這就是放在站點的根目錄下的一個叫phptest的文件夾下。

2. 為了防止打包上線引入文件的路徑出錯, 在vue.config.js文件配置publicPath (我使用的是vue-cli3.0, 2.0的也可以在配置文件中配置)

3.執行 npm run build 執行文件打包上線

4.在對應站點的目錄下 phptest 文件夾下新建一個 .htaccess 文件注意前面有個點，

在該文件中書寫如下配置

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /phptest/index.html [L]  // 注意：這個目錄是你設置存放vue上線文件的目錄/phptest/index.html

上面表示執行路徑的重寫

5.最后把剛剛build 出來的dist 目錄下的代碼復制到phptest目錄下就可以了

 

需要注意的是，記得在vue中准備一個404頁面

還有就是 開啟apache支持分布式配置(也就是支持.htaccess文件配置) 

需要設置  AllowOverride All

需要支持路徑重寫必須加載重寫模塊   LoadModule rewrite_module modules/mod_rewrite.so