灵感来源:
https://github.com/jonashackt/spring-boot-vuejs
我正在使用 frontend-maven-plugin 构建 vue.js 前端 和 spring-boot 后端。我的项目具有以下结构:
webapp
-> webapp-backend
-> webapp-frontend
在开发过程中,运行 npm runserve
工作正常,我可以通过以下位置访问我的前端:
但是当我构建应用程序(使用 frontend-maven-plugin)并运行它时:
mvn clean install
java -jar webapp-backend/target/webapp-backend-1.0.0-SNAPSHOT.jar
我只得到一个空白页:
即使 java 日志中没有错误。
我需要应用一些额外的配置吗? spring-boot 后端让它在生产构建期间正确重定向到我的前端?
下面是更多详细信息:
webapp/webapp-backend/src/main/java/hello/GreetingController.java
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/api")
public class GreetingController {
@RequestMapping(value = "/**/{[path:[^\\.]*}")
public String redirect() {
// Forward to home page so that route is preserved.
return "forward:/";
}
}
webapp-backend/pom.xml
<build>
<plugins>
...
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>Copy Vue.js frontend assets</id>
<phase>generate-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>src/main/resources/public</outputDirectory>
<overwrite>true</overwrite>
<resources>
<resource>
<directory>${project.parent.basedir}/webapp-frontend/dist</directory>
<includes>
<include>static/</include>
<include>index.html</include>
</includes>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
webapp-backend/src/main/resources/public/index.html(非空index.html文件)
webapp/webapp-frontend/pom.xml
...
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v10.0.0</nodeVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm run build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
...
最佳答案
这里有一些需要考虑的事情,我不知道其中是否有帮助,但我们永远不知道:
在后端:
- 再次检查您的后端
pom.xml
并查看所需的依赖项是否正确存在 - 确保您的
application.properties
中没有server.servlet.contextPath=/api
- 确保
application.properties
包含server.port=8080
(或者不包含此属性,默认端口为 8080)。 - 我认为
GreetingController
没有用...您在方法上指定的@RequestMapping
的目的是避免您的 Controller 在以下情况下接管:客户端刷新页面,浏览器发送/toto"
...如果没有此规则,您的服务器将尝试执行/toto
路由,该路由它不知道...尝试删除 Controller 类上的@RequestMapping
,或者暂时删除该类...
在前端:
- 您说,当您执行
npm runserve
命令并尝试访问http://localhost:8080/
时,您的应用程序正在运行...这没关系很奇怪。使用此命令是为了让您拥有一个前端服务器,更快地开发您的前端和组件。这是我的vue.config.js
,看看你是否得到相同或接近的东西:
module.exports = {
'outputDir': 'target/dist',
'assetsDir': 'static',
'devServer': {
'port': 8088,
'proxy': {
'/api': {
'target': 'http://localhost:8080',
'ws': true,
'changeOrigin': true
}
}
},
'transpileDependencies': [
'vuetify'
]
}
如您所见,我的前端开发服务器可以通过端口 8088
=> http://localhost:8088
访问...此外,我还有 'outputDir': 'target/dist',
,确保我的 js 文件写入正确的目录。
您可以执行以下操作来确保前端和后端文件“连接”:(在 webapp
文件夹中)
mvn clean
- 删除文件夹
webapp-backend/src/main/resources/public
及其中的所有内容。 - 如果有,请删除
webapp-backend/src/main/resources/index.html
(我们永远不知道) - 执行
mvn install
- 检查
webapp-backend/src/main/resources
。您应该有一个新的public
文件夹及其中的所有内容(index.html、static/)
这应该可以解决问题。
如果您创建了 public
文件夹,但仍然遇到空白页问题,那么我不知道您还能寻找什么。
但请尝试一下!
关于java - 运行 npm build 时无法访问 vue.js 前端(frontend-maven-plugin 和 spring-boot 后端),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61044505/