---
title: 打包部署
date: 2021-02-03 09:26:32
permalink: /pages/6fe261/
---
# 打包部署

::: tip
框架提供两种部署方式，第一种为前后端一起打包部署，第二种为前后端分离打包部署。
:::


## 前后端一起部署

1. 修改生产环境Base url文件 `./.env.production`

   ``` properties
   VUE_APP_BASE_API = './'
   ```

2. 进入前端目录执行打包命令
    ``` bash
    cd common-web

    yarn build:prod
    ```

3. 执行完成后前端项目将生产dist文件夹

    ![dist](https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203155236.png)

4. 打开dist目录，将除了 `index.html` 的文件全部考入后端项目 `src>main>resources>static` 目录下
，将 `index.html` 文件考入到 `src>main>resources>templates` 目录下

   ![static](https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203155255.png)

5. 进入后台代码目录，执行maven打包命令

    ``` bash
    cd common/

    mvn clean package
    ```

6. 将生成的war包上传到tomcat等服务器进行部署。

## 前后端分离部署

1. 修改生产环境Base url文件 `./.env.production`

   ``` properties
   # Base api，此处填写后台请求的地址及端口及路径
   VUE_APP_BASE_API = 'http://192.168.1.123:8080/common'
   ```

2. 进入前端目录执行打包命令
    ``` bash
    cd common-web

    yarn build:prod
    ```

3. 执行完成后前端项目将生产dist文件夹

    ![dist](https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203155236.png)

4. 将生成的dist文件夹里面内容上传至Nginx或Apache静态服务器

5. 进入后台代码目录执行maven打包命令

    ``` bash
    mvn clean package
    ```

6. 将生成的war包上传到tomcat等服务器进行部署。