Cannot access vue.js frontend when running npm build (frontend-maven-plugin and spring-boot backend)

huangapple go评论80阅读模式
英文:

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-pluginvue.js 前端spring-boot 后端。我的项目具有以下结构:

webapp
 -> webapp-backend
 -> webapp-frontend

在开发过程中,运行 npm run serve 正常工作,我可以访问我的前端页面:

Cannot access vue.js frontend when running npm build (frontend-maven-plugin and spring-boot backend)

但是当我构建应用程序(使用 frontend-maven-plugin)并使用以下命令运行时:

mvn clean install
java -jar webapp-backend/target/webapp-backend-1.0.0-SNAPSHOT.jar

我只看到一个空白页面:

Cannot access vue.js frontend when running npm build (frontend-maven-plugin and spring-boot backend)

尽管从 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
 -&gt; webapp-backend
 -&gt; webapp-frontend

During development running npm run serve works fine and I can access my frontend at:

Cannot access vue.js frontend when running npm build (frontend-maven-plugin and spring-boot backend)

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:

Cannot access vue.js frontend when running npm build (frontend-maven-plugin and spring-boot backend)

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(&quot;/api&quot;)
public class GreetingController {


  @RequestMapping(value = &quot;/**/{[path:[^\\.]*}&quot;)
  public String redirect() {
    // Forward to home page so that route is preserved.
    return &quot;forward:/&quot;;
  }
}

webapp-backend/pom.xml

&lt;build&gt;
	&lt;plugins&gt;
         ...
		&lt;plugin&gt;
			&lt;artifactId&gt;maven-resources-plugin&lt;/artifactId&gt;
			&lt;executions&gt;
				&lt;execution&gt;
					&lt;id&gt;Copy Vue.js frontend assets&lt;/id&gt;
					&lt;phase&gt;generate-resources&lt;/phase&gt;
					&lt;goals&gt;
						&lt;goal&gt;copy-resources&lt;/goal&gt;
					&lt;/goals&gt;
					&lt;configuration&gt;
						&lt;outputDirectory&gt;src/main/resources/public&lt;/outputDirectory&gt;
						&lt;overwrite&gt;true&lt;/overwrite&gt;
						&lt;resources&gt;
							&lt;resource&gt;
								&lt;directory&gt;${project.parent.basedir}/webapp-frontend/dist&lt;/directory&gt;
								&lt;includes&gt;
									&lt;include&gt;static/&lt;/include&gt;
									&lt;include&gt;index.html&lt;/include&gt;
								&lt;/includes&gt;
							&lt;/resource&gt;
						&lt;/resources&gt;
					&lt;/configuration&gt;
				&lt;/execution&gt;
			&lt;/executions&gt;
		&lt;/plugin&gt;
	&lt;/plugins&gt;
&lt;/build&gt;

webapp-backend/src/main/resources/public/index.html (non empty index.html file)

webapp/webapp-frontend/pom.xml

...
  &lt;build&gt;
    &lt;plugins&gt;
      &lt;plugin&gt;
        &lt;groupId&gt;com.github.eirslett&lt;/groupId&gt;
        &lt;artifactId&gt;frontend-maven-plugin&lt;/artifactId&gt;
        &lt;version&gt;${frontend-maven-plugin.version}&lt;/version&gt;
        &lt;executions&gt;
          &lt;execution&gt;
            &lt;id&gt;install node and npm&lt;/id&gt;
            &lt;goals&gt;
              &lt;goal&gt;install-node-and-npm&lt;/goal&gt;
            &lt;/goals&gt;
            &lt;configuration&gt;
              &lt;nodeVersion&gt;v10.0.0&lt;/nodeVersion&gt;
            &lt;/configuration&gt;
          &lt;/execution&gt;
          &lt;execution&gt;
            &lt;id&gt;npm install&lt;/id&gt;
            &lt;goals&gt;
              &lt;goal&gt;npm&lt;/goal&gt;
            &lt;/goals&gt;
            &lt;configuration&gt;
              &lt;arguments&gt;install&lt;/arguments&gt;
            &lt;/configuration&gt;
          &lt;/execution&gt;
          &lt;execution&gt;
            &lt;id&gt;npm run build&lt;/id&gt;
            &lt;goals&gt;
              &lt;goal&gt;npm&lt;/goal&gt;
            &lt;/goals&gt;
            &lt;configuration&gt;
              &lt;arguments&gt;run build&lt;/arguments&gt;
            &lt;/configuration&gt;
          &lt;/execution&gt;
        &lt;/executions&gt;
      &lt;/plugin&gt;
    &lt;/plugins&gt;
  &lt;/build&gt;  
...

答案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 文件夹内):

  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 文件夹但仍然遇到空白页面问题,那么我不知道还有什么其他方面可以查找。

但试一试吧!

英文:

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 your application.properties
  • Make sure the application.properties contains server.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&quot;... 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 access http://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 my vue.config.js, see if you get the same, or something close:
module.exports = {
    &#39;outputDir&#39;: &#39;target/dist&#39;,
    &#39;assetsDir&#39;: &#39;static&#39;,
    &#39;devServer&#39;: {
        &#39;port&#39;: 8088,
        &#39;proxy&#39;: {
            &#39;/api&#39;: {
                &#39;target&#39;: &#39;http://localhost:8080&#39;,
                &#39;ws&#39;: true,
                &#39;changeOrigin&#39;: true
            }
        }
    },
    &#39;transpileDependencies&#39;: [
        &#39;vuetify&#39;
    ]
}

As you can see, my frontend dev server is accessible through the port 8088=> http://localhost:8088... Besides, I have the &#39;outputDir&#39;: &#39;target/dist&#39;,, 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)

  1. mvn clean
  2. Delete the folder webapp-backend/src/main/resources/public and everything in it.
  3. If you have one, delete the webapp-backend/src/main/resources/index.html (we never know)
  4. Execute mvn install
  5. Check the webapp-backend/src/main/resources. You should have a new public 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 !

huangapple
  • 本文由 发表于 2020年4月5日 22:53:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/61044505.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定