java - 运行 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 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>  
...

Answer 1

这里有一些需要考虑的事情，我不知道其中是否有帮助，但我们永远不知道:

在后端:

• 再次检查您的后端 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 文件夹中)

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 文件夹，但仍然遇到空白页问题，那么我不知道您还能寻找什么。

但请尝试一下!