Laravel + vue-router 实现 HTML5 History 模式

自从玩上了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 协议》，转载必须注明作者和本文链接