本文以 ThinkPHP、Vue 为例,理应(未经验证)适用于 React、Angular 或其他前端项目,Java、Python 或其他后端项目。
目前网络上流传了一些糟糕的 Vue 前后端分离实践,前端与后端各自独立成一个项目,作为全栈开发的工作流程来说非常不合适。
这是因为 Vue Cli 提供的项目结构不易于嵌入其他框架内:
vue serve
访问而不是通过 Web 服务器outputDir 强制清空 dist 构建目录
这对于习惯了 Laravel 舒适工作流程的我来说很难接受,而解决这些问题需要大量时间。
Laravel Mix 是对于 Webpack 的优雅包装,提供了大量易于使用的实用功能。最重要的是可以无侵入式地与其他后端项目一同构建前端工作流程,只需要在后端项目内添加:
而不需要为前端项目提供一个独立的文件夹。
首先初始化 NPM 项目,为了便于使用 NPM Scripts,需要一同安装 cross-env
:
npm init -y
npm install laravel-mix cross-env --save-dev
然后在 package.json 中配置 NPM Scripts:
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
Laravel Mix 提供了示例配置文件,将它拷贝到当前目录:
cp node_modules/laravel-mix/setup/webpack.mix.js ./
你也可以重新编写配置文件 webpack.mix.js:
const mix = require("laravel-mix")
mix.js("src/app.js", "public/js")
.sass("src/app.scss", "public/css")
ThinkPHP 中没有实现 mix() 辅助函数,参考 Laravel 实现 Mix 辅助函数源码(Illuminate/Foundation/Mix.php),可以实现一版简易的 mix 辅助函数。
$manifest = json_decode(file_get_contents(public_path() . '/mix-manifest.json'), true);
如果只有单入口,可以使用模板变量赋值,避免实现 helper 辅助函数。
return view('index', ['manifest' => $manifest]);
在 View 中引用动态版本号:
<link rel="stylesheet" type="text/css" href="<?= $manifest['/css/app.css'] ?>">
<script type="text/javascript" src="<?= $manifest['/js/app.js'] ?>"></script>
博主真是太厉害了!!!
不错不错,我喜欢看 https://www.jiwenlaw.com/