英文:
Cannot access vue.js frontend when running npm build (frontend-maven-plugin and spring-boot backend)
问题
以下是您提供的内容的翻译:
受启发于:
https://github.com/jonashackt/spring-boot-vuejs
我正在构建一个使用 frontend-maven-plugin 的 vue.js 前端 和 spring-boot 后端。我的项目具有以下结构:
webapp
-> webapp-backend
-> webapp-frontend
在开发过程中,运行 npm run serve
正常工作,我可以访问我的前端页面:
但是当我构建应用程序(使用 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() {
// 转发到主页以保留路由。
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>
...
英文:
Inspired by:
https://github.com/jonashackt/spring-boot-vuejs
I am building a vue.js frontend and a spring-boot backend using the frontend-maven-plugin. My project has the following structure:
webapp
-> webapp-backend
-> webapp-frontend
During development running npm run serve
works fine and I can access my frontend at:
But when I build the application (using the frontend-maven-plugin) and run it with:
mvn clean install
java -jar webapp-backend/target/webapp-backend-1.0.0-SNAPSHOT.jar
I just get a blank page:
Even though there are no errors from the java logs.
Are there some additional configuration I need to apply in e.g. the spring-boot backend to get it to redirect correctly to my frontend during a production build?
Below some more details:
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 (non empty index.html file)
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>
...
答案1
得分: 1
以下是已翻译的内容:
在后端:
- 再次检查您的后端
pom.xml
文件,确保所需的依赖项已正确添加。 - 确保您的
application.properties
文件中没有server.servlet.contextPath=/api
这一行。 - 确保
application.properties
包含server.port=8080
(或者干脆不添加这个属性,因为默认端口是 8080)。 - 我认为
GreetingController
可能没有用... 您在方法上指定的@RequestMapping
的目的是在客户端刷新页面并且浏览器发送/toto
时,避免控制器接管... 如果没有这个规则,您的服务器将尝试执行/toto
路由,但它不知道如何处理... 请尝试要么删除控制器类上的@RequestMapping
,要么暂时删除该类...
在前端:
- 您说在运行
npm run serve
命令并尝试访问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',
,以确保我的 JavaScript 文件写入了正确的目录。
以下是您可以执行的步骤,以确保前端和后端文件"连接"在一起(在 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
文件夹但仍然遇到空白页面问题,那么我不知道还有什么其他方面可以查找。
但试一试吧!
英文:
Here are some things to consider, I don't know if any of them will help, but we never know:
On the backend:
- Check again your backend
pom.xml
and see if the required dependencies are properly in it - Make sure you don't have a
server.servlet.contextPath=/api
in yourapplication.properties
- Make sure the
application.properties
containsserver.port=8080
(or just don't this property, the default port is 8080). - I don't think the
GreetingController
is useful... The purpose of the@RequestMapping
you specified on the method is to avoid your controller to take over when the client refreshes his page and the browser sends a/toto"
... If you don't have this rule, your server will try to execute the/toto
route, which it doesn't know of... Try either removing the@RequestMapping
on your controller class, or delete the class for now...
On the frontend:
- You said your application were working when you were doing the
npm run serve
command and trying to accesshttp://localhost:8080/
... which is okay and weird. Using this command is to allow you to have a frontend server, faster to develop your frontend and your components. Here is myvue.config.js
, see if you get the same, or something close:
module.exports = {
'outputDir': 'target/dist',
'assetsDir': 'static',
'devServer': {
'port': 8088,
'proxy': {
'/api': {
'target': 'http://localhost:8080',
'ws': true,
'changeOrigin': true
}
}
},
'transpileDependencies': [
'vuetify'
]
}
As you can see, my frontend dev server is accessible through the port 8088
=> http://localhost:8088
... Besides, I have the 'outputDir': 'target/dist',
, making sure that my js files are written into the proper directory.
Here is what you can do to make sure your frontend and backend files are "connected": (in the webapp
folder)
mvn clean
- Delete the folder
webapp-backend/src/main/resources/public
and everything in it. - If you have one, delete the
webapp-backend/src/main/resources/index.html
(we never know) - Execute
mvn install
- Check the
webapp-backend/src/main/resources
. You should have a newpublic
folder and everything in it (index.html, static/)
That should do the trick.
If you have the public
folder created you are still experiencing the blank page issue, then I don't what else you can look for.
But give it a go !
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论