这是我参与更文挑战的第24天,活动详情查看: 更文挑战
业务场景
前后端分离开发模式下, Vue项目的部署成为一个需要解决的需求
有两种解决方案:
- 使用Nginx作为前端Web服务器
- 将Vue项目变为jar包加入后端服务
无论哪种模式, 都会产生跨域问题
在之前我已经写过类似的文章Vue跨域请求的处理方式
之前的文章主要介绍了第二种方式, 但所使用的Maven打包方法中, 有一个前提, 即本地必须安装node环境
显然这对于运维小伙伴或流水线部署是不友善的
本文将介绍如何利用frontend-maven-plugin插件进行处理
方案
其实要解决的问题很简单
即在打包目录下安装node环境和包管理器
frontend-maven-plugin帮我们解决了这个问题
废话不多说, 开始写代码, 首先要增加一些参数配置:
<properties>
<!--前端打包-->
<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>
- maven-frontend-plugin.version: 插件版本
- maven-frontend-plugin.nodeVersion: node版本
- maven-frontend-plugin.npmVersion: npm版本
之后引入插件并进行配置:
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${maven-frontend-plugin.version}</version>
<executions>
<!-- 安装node和npm -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
</execution>
<!-- 设置npm私服地址 -->
<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>
<!-- 安装依赖 -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<!-- 打包构建 -->
<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>
<!-- 若不方便访问官网,可手动设置镜像地址-->
<nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
<npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
</configuration>
</plugin>
是不是很简单?
其实只是增加了一步流程: 安装node和npm->安装依赖->打包构建
插件本身支持yarn, 使用yarn的小伙伴只需要把npm相关的内容修改为yarn, 第一步安装时调整代码为如下即可:
<execution>
<id>install node and yarn</id>
<goals>
<goal>install-node-and-yarn</goal>
</goals>
<phase>generate-resources</phase>
</execution>
总结
如果之前手动install过的小伙伴, 建议先把node_modules删除后再重新打包哦
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!