前言
事情是这样的，浙政钉上架，现在需要前后端共用一个项目进行自动化部署。一个手机端的项目，一个后台web的项目。简单来说就是：只执行一次npm run install && npm run build需要打包两个两个项目并且共用一个入口文件。我当时脑子里在想：“？？？？？？？？？这怎么搞？？？”
我当时的想法
1. 使用qiankun微前端技术：
浙政钉上放一个空项目，把两个项目部署在公司服务器上。浙政钉空项目作为微前端主项目引用两个子项目，根据环境自动判断是手机端或者后台。
放弃原因：两个子项目放公司服务器不划算，感觉不是最优解决方案
2. 把两个项目放入同一个目录下，在根目录改npm install 和npm run build的执行命令，实现装两个项目的依赖，打包两个项目
实现方式如下，仅供参考：
第一步：项目目录搭建
project
├─ app
├─ build // 两个项目打包之后都会打包到这个目录
├─ package-lock.json
├─ package.json
└─ web
第二步:在package.json中填入执行命令
{
"name": "root",
"version": "3.8.3",
"private": true,
"scripts": {
"install": "cd app && npm install && cd .. && cd web && npm install",
"build": "cd app && npm run build && cd .. && cd web && npm run build"
}
}
从以上的写法就能看出，步骤如下：
- 进入app项目目录
- 安装app项目依赖
- 返回上一级
- 进入web项目
- 安装web项目依赖
这样就实现了一个命令安装两个项目依赖，npm run build同理
两个项目的vue.config.js中配置打包后的生成目录统一生成到根目录：
outputDir: "../build/app"
在build/index.html中写入代码，动态判断进入项目
<script>
function isMobile() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
userAgent
);
}
function redirect() {
if (isMobile()) {
// 如果是移动设备，重定向到app目录下的index.html
window.location.href = "app/index.html";
} else {
// 如果不是移动设备，重定向到web目录下的index.html
window.location.href = "web/index.html";
}
}
redirect();
</script>
放弃原因：本地电脑可以，浙政钉自动化部署失败。
现在的做法
现在的方法比较sao，直接曲线救国，偷天换日，并且非常非常的简单
实现原理：后台项目在本地打包，然后放入app项目的public目录，在app项目的public/index.html中判断是否为pc端。
代码如下：
// 在public/index.html中插入script代码
<script>
function isMobile() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
}
function redirect() {
if (isMobile()) {
} else {
window.location.href = "build/index.html";
}
}
redirect();
</script>
这样连带着打包好的后台项目+未打包的移动端项目源码直接放入浙政钉自动化部署就可以实现两个项目合并
总结
虽然这个需求很xxxx，但是也让我从中学习了很多东西，对微前端和script命令了解更深。最后发现，可以曲线救国，当时开心了很久。妈妈再也不怕项目要合并到一起啦，如果这篇文章有帮到你，记得点个赞~~~~~~~~~~~~~~~