运行 npm build 时无法访问 vue.js 前端（frontend-maven-plugin 和 spring-boot 后端）

Question

灵感来源：

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() {
    // 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>  
...

Answer 1

这里有一些需要考虑的事情，我不知道它们是否会有所帮助，但我们永远不知道：

在后端：

• 再次检查您的后端pom.xml 并查看所需的依赖项是否在其中正确
• 确保您的application.properties 中没有server.servlet.contextPath=/api
• 确保application.properties 包含server.port=8080（或者不要这个属性，默认端口是8080）。
• 我不认为GreetingController有用...你在方法上指定的@RequestMapping的目的是避免你的控制器在客户端刷新他的页面并且浏览器发送@987654328时接管@...如果您没有此规则，您的服务器将尝试执行它不知道的/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',，确保将我的js 文件写入正确的目录。

您可以执行以下操作来确保您的前端和后端文件“已连接”：（在 webapp 文件夹中）

1. mvn clean
2. 删除文件夹webapp-backend/src/main/resources/public 及其中的所有内容。
3. 如果有，请删除webapp-backend/src/main/resources/index.html（我们永远不知道）
4. 执行mvn install
5. 检查webapp-backend/src/main/resources。您应该有一个新的public 文件夹和其中的所有内容（index.html、static/）

这应该可以解决问题。

如果您创建了public 文件夹，但您仍然遇到空白页问题，那么我不知道您还能寻找什么。

但是试一试！