实战详解：基于Spring Boot和Vue的前后端分离微服务项目的打包与部署全过程（包括原始部署和宝塔部署）

前端打包部署

前端项目为vue项目，使用vue admin template作为后台管理模板进行开发。

前端打包

了解开发环境、生产环境，修改生产环境的配置

在开发的时候，往往使用本地电脑进行开发。但是项目上线的时候，需要部署到云服务器中。因此项目中使用两个配置文件来分别存放开发环境和生产环境，方便环境切换。

修改生产环境配置文件。

修改配置文件

运行命令进行打包

打包成功之后得到dist文件夹

前端部署

使用下面两种部署方式都可以，如果linux服务器已经安装了宝塔，推荐宝塔，因为方便高效。

nginx部署

先将打包后的文件上传到云服务器的nginx的html目录下

修改配置文件

server {
        # 前端项目要部署到什么端口
        listen       8889;
        server_name  localhost;

        location / {
            # 告诉nginx，前端打包好的文件在哪里 
            root   html/sssFront;
            # index配置首页文件
            index  index.html index.htm;
        }
 
        #这里解决跨域问题，后端地址及端口号
    location /api/ {
        # ip和端口 根据后端服务器来确定，因为我的后端服务也是部署在这台服务器中，所以可以写127.0.0.1
      proxy_pass http://127.0.0.1:6001$request_uri;
      proxy_redirect    off;
      proxy_set_header  Host $host;
      proxy_set_header  X-real-ip $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    }
 
  }

修改完配置文件之后，重启或者reload nginx即可。前端项目部署成功，服务器开放端口后，使用 ip:8889访问即可。

宝塔部署

宝塔安装

使用宝塔可以非常方便地部署前端、后端项目，但是有一个前提条件：你的服务器已经安装了宝塔，或者你的服务器非常干净，什么环境都没有。

想要安装宝塔非常简单，直接命令行运行下面的命令，途中有y/n，直接选择y即可。

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

安装成功之后记得将自己的信息存储起来。

云服务器开放宝塔相应端口（本文的端口是19565），即可使用本地电脑访问宝塔面板（访问地址为上图的外网面板地址），输入账号密码即可进入宝塔面板

软件安装

想要部署前端，只需要安装一个nginx即可

网站部署

勾选文件，右键删除

直接将本地打包的文件拖进来上传即可。

文件上传之后，如果自己输入的域名是假域名，需要配置云服务的ip

云服务器开放8002端口，即可访问前端项目

到这里，前端就部署成功啦，直接使用 域名:端口 或者 ip:端口即可访问网站

后端打包部署

后端打包

修改生产环境配置

pom文件修改

父工程的pom文件

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.1</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-surefire-plugin</artifactId>
            <version>2.19.1</version>
            <configuration>
                <!-- 默认关掉单元测试，不用手动关闭了 -->
                <skipTests>true</skipTests>
            </configuration>
        </plugin>
    </plugins>
</build>

子工程的pom文件

上一篇： Vue 3: 如何创建和使用子页面？

下一篇： 简化Vue3项目的打包流程