java - 将 Angular + Spring Boot 部署到 Tomcat

Question

可能是我做错了什么，但是......

1. 我在本地机器上用 Angular 做了一个简单的项目

2. 我已经用代码创建了一个文件 proxy.conf.json:

   “/注入(inject)”:{“目标”:“http://localhost:8080 ”,“安全”:假

3. 我已将我的 proxy.json 更改为:

   “脚本”:{“吴”:“吴”，“开始”:“ng serve –proxy-config proxy.conf.json”，“构建”:“ng构建”，

4. 我已经运行了 ng build –base-href/inj/–prod

5. 我在我的项目中添加了 maven 框架和 SpringBoot
6. 我插入了 Maven 插件以将文件从 Dist 复制到 Webapps，但我没有插入用于构建和运行的插件。
7. mvn clean 插入
8. 我将它部署在远程 tomcat 上，但出现 404 错误。
9. 好的，我在远程机器上运行了 npm install，但出现了没有 package.json 的错误。
10. 好的，当 mvn clean insert 时，我将 packege.json 添加到 dist
11. 我部署它并再次运行 npm install。没关系……
12. 但是 – 它仍然是 404 错误。索引 html 找不到 js 文件

我做错了什么？？？？

PS:我的目录结构:

injapp
|
-[angular]
|     |
|     ----[dist]
|     ----[e2e]
|     ----[node_modules]
|     ----[src]
|     ----package.json
|     ----etc
-[src]
|    |
|    -[main]
|       -[java]
|       -[webaps]
|          ---- web.xml

PS2:我的 war 文件 - 是 inj.warPS3:我的web.xml是

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>

我的 pom.xml 的一部分:

我的 pom.xml 获取更多信息:

<build>

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <version>2.4.2</version>
        <executions>
            <execution>
                <id>default-copy-resources</id>
                <phase>process-resources</phase>
                <goals>
                    <goal>copy-resources</goal>
                </goals>
                <configuration>
                    <overwrite>true</overwrite>
                    <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
                    <resources>
                        <resource>
                            <directory>${project.basedir}/angular/dist</directory>
                        </resource>
                    </resources>
                </configuration>
            </execution>
        </executions>
    </plugin>
</plugins>

Answer 1

在你的pom.xml文件，里面 <configuration>属性根据来自 pom.xml 的路径为前端提供工作目录.例如:

<workingDirectory>../angular/</workingDirectory>

因为 npm应该看到 package.json文件。

我的 <plugin> pom.xml 的配置:

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.6</version>

    <configuration>
      <nodeVersion>v8.9.4</nodeVersion>
      <npmVersion>5.6.0</npmVersion>
      <workingDirectory>src/main/frontend</workingDirectory>
    </configuration>

    <executions>
      <execution>
        <id>install node and npm</id>
        <goals>
          <goal>install-node-and-npm</goal>
        </goals>
      </execution>

      <execution>
        <id>npm install</id>
        <goals>
          <goal>npm</goal>
        </goals>
      </execution>

      <execution>
        <id>npm run build</id>
        <goals>
          <goal>npm</goal>
        </goals>

        <configuration>
          <arguments>run build</arguments>
        </configuration>
      </execution>
    </executions>
</plugin>

并修改了.angular-cli.json提供输出目录的文件:

"outDir": "../resources/static",

也在 package.json 中已修改 build脚本提供href选项为:

"build": "ng build --prod --base-href /app/",

所以，这就是我的构建在 tomcat 部署中的工作方式 app.war .