Vue 搭配 Spring MVC 建立一個 web 專案

xiong141發表於2023-09-21

Vue 搭配 Spring MVC 建立一個 web 專案

想要寫一個登入的web應用程式。頁面使用Vue，後端使用Spring MVC，最終打成war包，放在tomcat下啟動。

1.建立Spring MVC專案，命名loginbackend，配置成web專案。

建立好web專案後，在src/main目錄下建立webapp目錄用來存放靜態檔案和web配置。（可以用idea開發工具直接配置成web專案，但是idea配置出來的webRoot目錄不在src/main下邊，我們自己新建webapp目錄，配置成webRoot），目錄結構如下圖：

pom檔案中配置打包方式為war包，引入spring-webmvc依賴。pom如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>top.xiong</groupId>
    <artifactId>loginbackend</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

    <packaging>war</packaging>

    <dependencies>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.14</version>
        </dependency>
    </dependencies>
</project>

2.建立Vue工程，命名loginfrontend。

用Vue CLI工具建立工程。建立好後工作目錄如下：

執行npm install安裝依賴包，執行npm run build編譯專案，編譯好後會在專案根目錄下生成dist資料夾，dist資料夾裡的內容就是前端的執行檔案。

3.將loginfrontend與loginbackend工程結合，打成war包。

要把loginfrontend和loginbackend打成一個war包，需要在打包的收把 loginfrontend 工程 dist 下的檔案copy到 loginbackend 打包目錄的 webapp/static 下，在打成 war 包，這樣前後端的工程就在一起了。

3.1 修改web.xml改變預設頁面

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
         version="5.0">
    <welcome-file-list>
        <welcome-file>/static/index.html</welcome-file>
    </welcome-file-list>
</web-app>

3.2 修改loginfrontend工程編譯後預設引用檔案路徑

前端工程執行npm run build後編譯出來的index.html中引用的js檔案和css檔案的目錄是從dist目錄下開始的，dist相當於工程的根目錄，但是我們是把dist下的檔案到copy到了後端工程static目錄下的。工程啟動後，index.html中引用的js和css資原始檔的路徑變成了ContextRoot/static/js、ContextRoot/static/css目錄，所以要修改前端工程編譯後的引用資源路徑，修改方法為，在vue.config.js中加入publicPath:'static/配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: 'static/'
})

這樣編譯後的index.html中js和css的引用路徑就成了static/js/**.js、static/css/**.css。

3.3 修改pom檔案，使用外掛將前端程式碼copy到後端打包目錄下。

pom中加入build外掛，如下；

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.2.0</version>
                <executions>
                    <execution>
                        <id>copy-dist</id>
                        <phase>compile</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${project.basedir}/../loginfrontend/dist</directory>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <!-- 打war包外掛，不用這個會報錯，不知道為啥 -->
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.1</version>
            </plugin>
        </plugins>
    </build>