如何將Angular代碼部署到ApacheTomcat？

如何將 Angular 代碼部署到 Apache Tomcat？

uj5u.com熱心網友回復：

1. 在 Visual Studio Code 中運行 ng-build 命令

2. 從 dist 檔案夾復制檔案，例如：C:\Users\ap022\Desktop\Project_Name\dist\MaterialDemo

3. 通過創建新檔案夾將復制的檔案粘貼到 tomcat 的 webapps 檔案夾中，例如：E:\apache-tomcat-9.0.37\webapps

4. 從復制的檔案中更改 index.html 中的 href 值

uj5u.com熱心網友回復：

如果您使用的是 maven，您可以使用“maven-war-plugin”來創建一個 .war 檔案。然后您可以部署為常規戰爭。

<plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.2.0</version>
                <configuration>
                    <warName>PME_UI_ADMIN_PORTAL_${version}</warName>
                    <warSourceExcludes>**</warSourceExcludes>
                    <nonFilteredFileExtensions>
                        <!-- default value contains jpg,jpeg,gif,bmp,png -->
                        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                        <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                        <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                    </nonFilteredFileExtensions>
                    <webResources>
                        <resource>
                            <directory>dist</directory>
                            <!-- override the destination directory for this resource -->
                            <targetPath />
                            <!-- enable filtering -->
                            <filtering>true</filtering>
                        </resource>
                        <resource>
                            <directory>src/assets</directory>
                            <!-- override the destination directory for this resource -->
                            <targetPath>assets</targetPath>
                            <!-- enable filtering -->
                            <filtering>true</filtering>
                        </resource>
                    </webResources>
                  <webXml>web.xml</webXml>
                  <failOnMissingWebXml>true</failOnMissingWebXml>
                </configuration>
            </plugin>

以下插件將安裝 node 和 npm 并構建源代碼

<!-- Plugin to execute command  "npm install" and "npm run build" inside /angular directory -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.6</version>

                <configuration>
                    <workingDirectory>./</workingDirectory>
                </configuration>
                <executions>
                    <!-- It will install nodejs and npm -->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v10.16.0</nodeVersion>
                            <npmVersion>6.9.0</npmVersion>
                        </configuration>
                    </execution>

                    <!-- It will execute command "npm install" inside "/angular" directory -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                     <!--It will execute command "npm lint"-->
                    <execution>
                        <id>npm lint</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run lint</arguments>
                        </configuration>
                    </execution>

                    <!-- It will execute command "npm build" inside "/angular" directory to clean and create "/dist" directory-->
                    <execution>
                        <id>npm build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

標籤：有角的 公猫

上一篇：在ng中使用評級選擇角度

下一篇：Angular：在Angular中延遲加載背景圖片