This is the 24th day of my participation in Gwen Challenge
The business scenario
The deployment of a Vue project becomes a requirement to be addressed in a separate development mode
There are two solutions:
- Use Nginx as the front-end Web server
- Add the Vue project as a JAR package to the back-end service
Either pattern creates cross-domain problems
I’ve written a similar article before about how Vue handles cross-domain requests
The previous article focused on the second approach, but the Maven packaging method used requires that the Node environment be installed locally
Obviously this is not friendly to operations partners or pipeline deployments
This article describes how to use the frontend- Maven-plugin
plan
The problem to be solved is simple
Install the Node environment and package manager in the package directory
The frontend- Maven-plugin helps us solve this problem
Without further ado, to start writing code, first add some parameters:
<properties>
<! -- Front-end packaging -->
<maven-frontend-plugin.version>1.10.0</maven-frontend-plugin.version>
<maven-frontend-plugin.nodeVersion>v9.9.0</maven-frontend-plugin.nodeVersion>
<maven-frontend-plugin.npmVersion>6.9.0</maven-frontend-plugin.npmVersion>
</properties>
Copy the code
- Maven-frontend -plugin.version: indicates the plug-in version
- Maven – frontend – plugin. NodeVersion: node version
- Maven – frontend – plugin. NpmVersion: NPM version
After importing the plug-in and configuring it:
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${maven-frontend-plugin.version}</version>
<executions>
<! Install node and NPM -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
</execution>
<! Set NPM private server address -->
<execution>
<id>npm set private registry</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>config set registry http://my/npm</arguments>
</configuration>
</execution>
<! -- Install dependencies -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<! -- Package build -->
<execution>
<id>npm run build</id>
<goals>
<goal>npm</goal>
</goals>
<phase>compile</phase>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
<configuration>
<nodeVersion>${maven-frontend-plugin.nodeVersion}</nodeVersion>
<npmVersion>${maven-frontend-plugin.npmVersion}</npmVersion>
<! -- If it is not convenient to visit the official website, you can manually set the mirror address -->
<nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
<npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
</configuration>
</plugin>
Copy the code
Isn’t that easy?
It just adds a step: Install Node and NPM -> Install dependencies -> Package builds
The plug-in supports YARN. If you want to use YARN, you only need to change the content related to NPM to YARN. The adjustment code is as follows:
<execution>
<id>install node and yarn</id>
<goals>
<goal>install-node-and-yarn</goal>
</goals>
<phase>generate-resources</phase>
</execution>
Copy the code
conclusion
If you have manually installed node_modules, you are advised to delete node_modules and then repackage them