菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
1319
12

Laravel + vue-router 实现 HTML5 History 模式

原创
05/13 14:22
阅读数 2904

自从玩上了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'

发表评论

0/200
1319 点赞
12 评论
收藏
为你推荐 换一批