SpringBoot+vue2聯(lián)合部署，混合部署
前端工程和后端工程目前是都是相對(duì)獨(dú)立性的模式進(jìn)行開發(fā)的。
打包機(jī) 只擁有maven，沒(méi)有nodejs
軟件工程場(chǎng)景：
- 前后端工程在同一個(gè)父工程下面，作為一個(gè)子工程存在，各自獨(dú)立開發(fā)。
- 前端工程作為一個(gè)獨(dú)立的目錄存在于后端代碼中，前端目錄的根目錄（例如front）與后端工程的src目錄同級(jí)。–本文的例子采用的是這種模式。
打包發(fā)布場(chǎng)景：
- 不將前端單獨(dú)打包發(fā)布至nginx服務(wù)器中。
- 服務(wù)器只能部署一個(gè)war包。–本文的例子采用的是這種模式。
當(dāng)滿足上述場(chǎng)景的時(shí)候，可以采用以下打包部署方案
- 優(yōu)先將前端構(gòu)建打包，將前端構(gòu)建出的內(nèi)容，copy至后端SpringBoot工程的webapp目錄下。
- 在通過(guò)maven打包后端，這樣就可以將前端資源打保進(jìn)war中了。
實(shí)現(xiàn)
主要是在前端處理。
在前端工程中增加腳本，腳本調(diào)用入口在package.json文件中。通過(guò)node調(diào)用文件copy的腳本。
{
...
...
"scripts": {
"build-copy": "vue-cli-service build && node src/utils/fileCopy.js"
},
...
...
}
fileCopy.js
先刪除目標(biāo)路徑（后端工程中的前端文件的路徑）下的內(nèi)容，在將新生成的前端文件copy過(guò)去。
const fileUtil = require('./fileUtil')
// 目標(biāo)文件夾
const staticDirectory = '../src/main/webapp/'
// 刪除
fileUtil.deleteFolder(staticDirectory + "static")
fileUtil.deleteFile(staticDirectory + "index.html")
// 拷貝
fileUtil.copyFolder('./server/dist', staticDirectory)
console.log('文件拷貝成功!')
fileUtil.js
借助fs模塊進(jìn)行文件操作。
const fs = require('fs')
/**
* 刪除該路徑下所有的內(nèi)容
* @param path
*/
function deleteFolder(path) {
let files = []
if (fs.existsSync(path)) {
if (fs.statSync(path).isDirectory()) {
files = fs.readdirSync(path)
files.forEach((file) => {
const curPath = path + '/' + file
if (fs.statSync(curPath).isDirectory()) {
deleteFolder(curPath)
} else {
fs.unlinkSync(curPath)
}
})
fs.rmdirSync(path)
} else {
fs.unlinkSync(path)
}
}
}
/**
* 刪除文件
* @param path
*/
function deleteFile(path) {
if (fs.existsSync(path)) {
if (fs.statSync(path).isDirectory()) {
deleteFolder(path)
} else {
fs.unlinkSync(path)
}
}
}
/**
* 復(fù)制路徑下的內(nèi)容到指定目錄
* @param from
* @param to
*/
function copyFolder(from, to) {
let files = []
// 文件是否存在 如果不存在則創(chuàng)建
if (fs.existsSync(to)) {
files = fs.readdirSync(from)
files.forEach((file) => {
const targetPath = from + '/' + file
const toPath = to + '/' + file
// 復(fù)制文件夾
if (fs.statSync(targetPath).isDirectory()) {
copyFolder(targetPath, toPath)
} else {
// 拷貝文件
fs.copyFileSync(targetPath, toPath)
}
})
} else {
fs.mkdirSync(to)
copyFolder(from, to)
}
}
module.exports = {
deleteFolder,
deleteFile,
copyFolder
}
問(wèn)題：
- 在管理代碼上需要進(jìn)行手動(dòng)執(zhí)行前端打包，容易忘記。
- 對(duì)本地開發(fā)環(huán)境需要同時(shí)支持特定版本的nodejs和npm。
打包機(jī)同時(shí)擁有maven和nodejs。
如果打包機(jī)同時(shí)擁有maven和nodejs?？梢越柚鷐aven插件frontend-maven-plugin進(jìn)行一步打包。
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
若需要使用這個(gè)插件，需要將軟件工程，調(diào)整為，后端工程和前端工程平級(jí)，同屬于一個(gè)父工程的子工程下面。在父工程的pom文件中，定義模塊時(shí)，需要將前端模塊順序放在后端之前，這樣做，主要是為了解決前后端的打包順序問(wèn)題。
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
...
...
...
<modules>
<module>frontend</module>
<module>server</module>
</modules>
</project>
前端工程中需要增加一個(gè)pom文件。配置腳本
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
...
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.8.0</version>
<executions>
<!-- 檢查是否安裝node npm -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
</execution>
<!-- 執(zhí)行腳本，刪除node_modules和package-lock.json -->
<execution>
<id>npm run clean</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run clean</arguments>
</configuration>
</execution>
<!-- npm install -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install --registry=https://registry.npm.taobao.org</arguments>
</configuration>
</execution>
<!-- build 之后復(fù)制文件到 src/main/resource/static 下 -->
<execution>
<id>npm run build</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run build-copy</arguments>
</configuration>
</execution>
</executions>
<configuration>
<nodeVersion>v10.24.1</nodeVersion>
<npmVersion>6.14.12</npmVersion>
<!-- node安裝路徑 -->
<installDirectory>${settings.localRepository}</installDirectory>
<!-- 前端代碼路徑 -->
<workingDirectory>${basedir}</workingDirectory>
</configuration>
</plugin>
</plugins>
</build>
</project>
通過(guò)調(diào)用父工程的mvn clean install即可。
問(wèn)題：
-
首次安裝 nodejs和npm會(huì)很慢。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-829724.html
-
打包機(jī)需要可以訪問(wèn)淘寶鏡像?；蛘叽罱ū镜冂R像，將對(duì)應(yīng)的node和npm安裝包放進(jìn)去才可以。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-829724.html
到了這里，關(guān)于SpringBoot+vue2聯(lián)合打包部署，混合打包部署的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
