Laravel + Vue 前后台分开打包解决方案 | Laravel China 社区
Laravel
话题列表
社区 Wiki
优质外文
招聘求职
Laravel 实战教程
社区文档
登录
注册
Laravel
首页
Laravel
Go
PHP
Vue.js
Python
Java
MySQL
Rust
LK
Elasticsearch
F2E 前端
Server
程序员
Database
DevTools
Computer Science
手机开发
AdonisJS
社区
Wiki
教程
Laravel 实战教程首页
《L01 Laravel 教程 - Web 开发实战入门》
《L02 Laravel 教程 - Web 开发实战进阶》
《L03 Laravel 教程 - 实战构架 API 服务器》
《L04 Laravel 教程 - 微信小程序从零到发布》
《L05 Laravel 教程 - 电商实战》
《L06 Laravel 教程 - 电商进阶》
《LX1 Laravel / PHP 扩展包视频教程》
《LX2 PHP 扩展包实战教程 - 从入门到发布》
《L07 Laravel 教程 - Laravel TDD 测试实战》
《LX3 Laravel 性能优化入门》
《LX4 Laravel / PHP 五分钟视频》
文档
社区文档首页
《Laravel 中文文档》
《Laravel 速查表》
《PHP 代码简洁之道》
《Laravel 编码技巧》
《Dcat Admin 中文文档》
《Laravel Nova 中文文档》
《Lumen 中文文档》
《Dingo API 中文文档》
《 Laravel 项目开发规范》
《构建 Laravel 开发环境》
登录
注册
微信登录
Laravel + Vue 前后台分开打包解决方案
78
13
科大大 的个人博客
11754
创建于 4年前
更新于 4年前
当我们使用 Laravel + Vue 开发项目时候，经常会碰到需要开发 后台 的项目，我们会希望 前台 和 后台 分开构建，当 前台 和 后台 都使用 laravel-mix 进行构建时，我们希望可以分开处理，下面根据这些需求提供了如下的解决方案：
后台使用单独的 mix 构建文件，命名为 webpack.admin.js，与 webpack.mix.js 在同一目录下
打包出来后的文件单独为一个文件夹，方便访问，例如打包到 public/back 文件夹下（这里不能用 admin，至于为什么在 这里 会讲解）
修改 webpack.mix.js 使其支持 env，这样可以通过参数指定是构建 后台 还是 前台 项目
方案实现
首先在 web.php 中指定两个路由，分别访问前台项目及后台项目
// web.php
Route::get('/', function () {
return view('index');
});
Route::get('/admin', function () {
return view('admin');
});
创建新的 webpack.admin.js 并指定构建规则：
const mix = require('laravel-mix')
if (mix.inProduction()) {
mix.version()
mix.webpackConfig({
output: {
publicPath: '/back/', // 设置默认打包目录
chunkFilename: `js/[name].${mix.inProduction() ? '[chunkhash].' : ''}js` // 路由懒加载的时候打包出来的js文件
})
mix.js('resources/admin/assets/js/app.js', 'public/back/js') // 打包后台js
.sass('resources/admin/assets/sass/app.scss', 'public/back/css') // 打包后台css
.extract(['vue', 'iview', 'vue-router', 'axios']) // 提取依赖库
.setResourceRoot('/back/') // 设置资源目录
.setPublicPath('public/back') // 设置 mix-manifest.json 目录
修改 webpack.mix.js，添加 minimist 包使其支持 env，可以获取 node 环境参数
const mix = require('laravel-mix')
// 得到package.json中的参数 --env.admin 转换成 一个对象 {admin: true}
const { env } = require('minimist')(process.argv.slice(2))
// 判断如果是admin那就执行 webpack.admin.js 构建后台项目，构建之后return就不会往下执行了
if (env && env.admin) {
require(`${__dirname}/webpack.admin.js`)
return
// 前台项目的构建规则
if (mix.inProduction()) {
mix.version()
mix.webpackConfig({
output: {
publicPath: '/frontend/', // 设置默认打包目录
chunkFilename: `js/[name].${mix.inProduction() ? '[chunkhash].' : ''}js` // 路由懒加载的时候打包出来的js文件
})
mix.js('resources/frontend/assets/js/app.js', 'public/frontend/js')
.sass('resources/frontend/assets/sass/app.scss', 'public/frontend/css')
.extract(['vue'])
.setResourceRoot('/frontend/') // 设置资源目录
.setPublicPath('public/frontend/') // 设置 mix-manifest.json 目录
修改 package.json 添加构建后台的命令：
// package.json
"scripts": {
"dev-admin": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.admin",
"prod-admin": "npm run production-admin",
"production-admin": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.admin",
执行 yarn run dev 和 yarn run dev-admin 之后，得到的 public 目录如下所示：
其中 /back 目录为后台目录，/frontend 目录为前台目录
注意：这里不能用 admin 作为后台目录，也就是不能使用和路由同名的目录名，因为在访问 /admin 的时候，如果后台使用同名的 admin 浏览器会以为你是在访问 /public/admin 目录，而我们希望的是访问 public/index.php，所以这里我用了 back 作为后台项目打包后的目录。
然后访问页面 /admin 会报出找不到 mix-manifest.json 的错误：
原因是因为我在 admin.blade.php 中使用了 mix 方法进行加载 css 和 js，而 mix 方法会找 mix-manifest.json 这个文件去匹配资源路径（为的是可以添加版本号），mix 方法如下所示：
function mix($path, $manifestDirectory = '')
static $manifests = [];
if (! Str::startsWith($path, '/')) {
$path = "/{$path}";
if ($manifestDirectory && ! Str::startsWith($manifestDirectory, '/')) {
$manifestDirectory = "/{$manifestDirectory}";
if (file_exists(public_path($manifestDirectory.'/hot'))) {
$url = file_get_contents(public_path($manifestDirectory.'/hot'));
if (Str::startsWith($url, ['http://', 'https://'])) {
return new HtmlString(Str::after($url, ':').$path);
return new HtmlString("//localhost:8080{$path}");
$manifestPath = public_path($manifestDirectory.'/mix-manifest.json');
if (! isset($manifests[$manifestPath])) {
if (! file_exists($manifestPath)) {
throw new Exception('The Mix manifest does not exist.');
$manifests[$manifestPath] = json_decode(file_get_contents($manifestPath), true);
$manifest = $manifests[$manifestPath];
if (! isset($manifest[$path])) {
report(new Exception("Unable to locate Mix file: {$path}."));
if (! app('config')->get('app.debug')) {
return $path;
return new HtmlString($manifestDirectory.$manifest[$path]);
发现了 mix 方法第二个参数可以指定 mix-manifest.json 文件的目录，因此我在 admin.blade.php 中修改为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Document</title>
<link rel="stylesheet" href="{{mix('/css/app.css', 'back')}}">
</head>
<body>
<div id="app"></div>
<script src="{{mix('/js/manifest.js', 'back')}}"></script>
<script src="{{mix('/js/vendor.js', 'back')}}"></script>
<script src="{{mix('/js/app.js', 'back')}}"></script>
</body>
</html>
还有 index.blade.php 前台页面的 css 和 js 的加载路径：
<link rel="stylesheet" href="{{mix('css/app.css', 'frontend')}}">
<script src="{{mix('/js/manifest.js', 'frontend')}}"></script>
<script src="{{mix('/js/vendor.js', 'frontend')}}"></script>
<script src="{{mix('/js/app.js', 'frontend')}}"></script>
这样就可以正常访问了：
另外还有前台页面：
总结
以上是对前后台分开打包的一种解决方案，以上方案其实也可以更方便的分开部署项目，例如我要分开部署后台项目为另一个二级域名 admin.domain.com 的话只需要修改 nginx 的目录指向 /public/back 就可以了，如果有其他更加好的方案欢迎评论~
以上代码可以访问我的 Github
本作品采用《CC 协议》，转载必须注明作者和本文链接
kwen
本帖由系统于 4年前 自动加精
举报
科大大
课程读者
416 声望
希望世界更美好
78 人点赞
《L05 电商实战》
从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
推荐文章：
更多推荐...
分享创造
如何找到你的第一份远程工作与海外外包-远程工作篇(放了个TS全栈教学的广告,不喜欢立删...)
33
21
1个月前
博客
🎈 Slow Admin - 使用Laravel和Amis快速构建你的后台
25
35
3个月前
博客
用Go实现支持多种协议的抓包工具——Shermie-Proxy
22
33
5个月前
博客
使用 Laravel Filament 极速搭建美观大方的后台面板
20
44
6个月前
博客
国密招商银行对接
29
23
6个月前
博客
Nginx 同域名部署前后端分离项目
19
12
7个月前
讨论数量: 6
排序：
时间
投票
OneStep
金牌译者
132 声望
我比较倾向完全分离的做法, 这样前端VUE就用 TYPESCRIPT ,感觉超爽
4年前
评论
评论
举报
科大大
课程读者
416 声望
@OneStep 是的，前台后台分开技术栈，也可以用react，维护起来更方便点
4年前
评论
评论
举报
xukeyan
0 声望
good
4年前
评论
评论
举报
maxilo
1 声望
还是完全分离吧
vue + lumen很舒服
我用的laravel-mix 又封装了一层宝宝的架子
4年前
评论
评论
举报
kinyou
课程读者
71 声望
PHP全栈工程师 @ ABC
不错
4年前
评论
评论
举报
ilchin
课程读者
0 声望
我按照你的文章做了分开打包，一切都还很顺利，只是scss文件编译出来后css文件是空的。这个问题是在很莫名其妙了。
2年前
评论
评论
举报
讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！
<a href="javascript:;" class="mr-2 ui popover text-mute" data-html="黏贴或拖拽图片至输入框内皆可上传图片">
<a href="javascript:;" class="mr-2 ui popover text-mute hide-on-mobile" data-html="支持除了 H1~H6 以外的GitHub 兼容 Markdown">
支持 MD
帮助
关注本文
评论
科大大
未填写
文章
粉丝
71
喜欢
206
收藏
58
排名：163
访问：5.9 万
关注
私信
所有博文
阅读模式
文章归档
3 篇
2018 年 3 月
1 篇
2018 年 2 月
最新文章
最受欢迎
4年前
Laravel + Vue 前后台分开打包解决方案
4年前
在 Laravel 中使用 GraphQL 二 [修改数据]
4年前
Laravel 5.6.7 版本发布，加入了 SFTP 驱动
4年前
在 Laravel 中使用 GraphQL 一 [获取数据]
91
在 Laravel 中使用 GraphQL 一 [获取数据]
78
Laravel + Vue 前后台分开打包解决方案
33
在 Laravel 中使用 GraphQL 二 [修改数据]
Laravel 5.6.7 版本发布，加入了 SFTP 驱动
社区赞助商
成为赞助商
社区赞助商
成为赞助商
关于 LearnKu
LearnKu 是终身编程者的修道场
做最专业、严肃的技术论坛
LearnKu 诞生的故事
资源推荐
《社区使用指南》
《文档撰写指南》
《LearnKu 社区规范》
《提问的智慧》
服务提供商
其他信息
成为版主
所有测验
联系站长（反馈建议）
粤ICP备18099781号-6
粤公网安备 44030502004330号
违法和不良信息举报
由 Summer 设计和编码 ❤
请登录
提交
忘记密码?
or
注册
第三方账号登录
微信登录
GitHub 登录
内容举报
匿名举报，为防止滥用，仅管理员可见举报者。
我要举报该，理由是：
垃圾广告：恶意灌水、广告、推广等内容
无意义内容：测试、灌水、文不对题、消极内容、文章品质太差等
违规内容：色情、暴利、血腥、敏感信息等
不友善内容：人身攻击、挑衅辱骂、恶意行为
科学上网：翻墙、VPN、Shadowsocks，政策风险，会被关站！
不懂提问：提问太随意，需要再做一遍《提问的智慧》测验
随意提问：提问没有发布在社区问答分类下
排版混乱：没有合理使用 Markdown 编写文章，未使用代码高亮
内容结构混乱：逻辑不清晰，内容混乱，难以阅读
标题随意：标题党、标题不释义
尊重版权：分享付费课程、破解软件（付费），侵犯作者劳动成果
其他理由：请补充说明
举报
取消