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:

  1. Use Nginx as the front-end Web server
  2. 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