Preface
The thing is like this, Zhezheng Ding is on the shelves, and now the front and back ends need to share a project for automated deployment. A mobile terminal project and a backend web project. To put it simply: executing npm run install && npm run build only once requires packaging two projects and sharing a single entry file . I was thinking in my mind: "?????????? What is going on???"
my thoughts at that time
1. Use qiankun micro front-end technology:
Put an empty project on Zhejiang Zhengding and deploy the two projects on the company server. As the main micro-front-end project, the Zhejiang Dingkong project references two sub-projects and automatically determines whether it is the mobile terminal or the backend according to the environment.
Reason for giving up: It is not cost-effective to put the two sub-projects on the company server, and it does not feel like the optimal solution.
2. Put the two projects into the same directory, and change the execution commands of npm install and npm run build in the root directory to install the dependencies of the two projects and package the two projects.
The implementation is as follows, for reference only:
Step 1: Build project directory
project
├─ app
├─ build // 两个项目打包之后都会打包到这个目录
├─ package-lock.json
├─ package.json
└─ web
Step 2: Fill in the execution command in 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"
}
}
As can be seen from the above writing, the steps are as follows:
- Enter the app project directory
- Install app project dependencies
- Back to previous
- Enter the web project
- Install web project dependencies
In this way, one command is implemented to install two project dependencies. The same is true for npm run build.
The packaged generated directories configured in vue.config.js of the two projects are uniformly generated to the root directory:
outputDir: "../build/app"
Write code in build/index.html to dynamically determine entry into the project
<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>
Reason for abandonment: The local computer is OK, but the automated deployment of Zhejiang Zhengding failed.
Current practice
The current method is relatively sao, directly saving the country through curves, stealing the sky and changing the situation, and it is very, very simple.
Implementation principle: The background project is packaged locally, and then placed in the public directory of the app project, and whether it is the PC side is determined in the public/index.html of the app project.
code show as below:
// 在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>
In this way, the packaged backend project + unpackaged mobile project source code can be directly placed into Zhejiang Ding Automated Deployment to achieve the merger of the two projects.
Summarize
Although this requirement is very xxxx, it also allowed me to learn a lot from it, and I have a deeper understanding of micro frontends and script commands. Finally, I discovered that I could save the country through a curve, and I was very happy for a long time. Mom is no longer afraid of merging projects together. If this article helps you, remember to give it a like~~~~~~~~~~~~~~~