Laravel + vue-router 實現 HTML5 History 模式

waney發表於2017-08-23
LaravelVueHTML模式

自從玩上了Laravel，就每天刷這個網站，有些人可能需要解決一個問題：
laravel 路由 和 vue-router 實現HTML5 History 模式無法同時開啟。
由於我要結合 Vue 的 非同步元件 和 Webpack 的 code splitting feature, 實現路由元件的懶載入。所以我選用了Vue-cli。

我的想法是：
透過nginx 配置js和css等靜態資源由nginx處理，laravel則由Apache處理，從而laravel重寫規則放在Apache，vue-router的重寫規則就放在nginx，開工：

1、將vue-cli打包配置改一下，將資原始檔直接打包到laravel的public目錄下。
目錄規劃：
/
--dir1: laravel目錄
--dir2: vue-cli 目錄

> /dir2/config/index.js
assetsRoot: path.resolve(__dirname, '../../dir1/public'),
assetsSubDirectory: 'static',
assetsPublicPath: '/'

2、vue-cli生成mix-manifest.json檔案。

/dir2/build/webpack.prod.conf.js
plugins: [] 下面加
var ManifestPlugin = require('webpack-manifest-plugin')
new ManifestPlugin({
fileName: '../../dir1/public/mix-manifest.json',
basePath: '/'
})

3、配置Nginx。

location ~ \.(js|css|png|jpg|gif)$ {
root /dir1/public;
}
location / {
proxy_pass   https://127.0.0.1:xxxx;
include proxy.conf;
}

4、完成。

RouterConfig.mode = 'history'
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章