昨天尝试部署一个 Vue+Koa2 的前后端分离项目，没想到因为前端项目部署的问题，卡了一整天，今天才终于找到了问题所在，成功解决。这篇文章主要谈谈：

• 线上部署项目的相关事宜

• 如何用 Nginx 实现同端口多项目部署

1. 项目结构说明

服务器上的项目结构大概是这样的：

`在 /home 路径下有两个如下的项目文件夹：

Vue-mall
MiniProgram-Admin
    |--client
        |--css
  |--js
  |--images
        |--index.html
    |--server
`

其中，Vue-mall 是之前部署在根目录下的项目，也就是输入域名后默认访问的项目，这个不用动它；而 MiniProgram-Admin 就是本次需要部署的项目，包括一个 client 前端项目文件夹和一个 server 后端项目文件夹，希望达到的效果是，输入域名 + /admin/ 后，可以访问这个项目。

2. 修改配置文件

之前的项目是直接部署在根目录下的，也即 Nginx 配置文件的  location / 下，所以不需要改动前端项目的配置文件，直接打包上传即可；但这次不是部署在根目录下，所以要修改两个地方：打包路径和路由配置

2.1 修改打包路径

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径.

vue.config.js 文件下的 publicPath 项，在 1. 开发环境 或者 2.生产环境但部署在根目录的情况下，直接使用默认的 / 即可，不需要特意去配置；但在生产环境且不是部署在根目录的情况下，则需要额外进行配置。

具体的路径配置是任意的，根据你自己的需要选择 —— 因为我们希望输入域名 + /admin/ 后，就可以访问这个项目，所以配置了 /admin/ 路径。这里要注意，虽然路径可以任选，但是必须和后面 Nginx 的路径配置一致，否则会报错。

publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/',

2.2 修改路由配置

同样，需要配置一下路由：

const createRouter = () => new Router({   routes   mode: 'history',    base: process.env.NODE_ENV === 'production' ? '/admin' : '/', })

这里必须要使用 history 模式，同时和上面一样区分好项目环境。

2.3  修改请求地址

之前都是本地开发，没有区分开发环境和生产环境下的请求地址，所以这里还得修改一下。

在项目的 src 文件夹下新建 config.js 文件，内容如下：

`const host = process.env.NODE_ENV === 'production' ?
            'http://mydomain.com:3000':'http://localhost:3000'

const config = {
  host
}

export default config
`

之后在请求相关的 api.js 里再把 config 导入使用：

``import config from '@/config'
const BASEURL = config.host

export function fetchData(){
  return request({
    method:'get',
    url:${BASEURL}/..../....
  })
}
``

这样就可以根据开发环境和生产环境向不同的地址发送请求了。

3. 前端项目部署

3.1 文件结构一览

之后就可以 npm run build 打包了，打包后生成的静态资源结构是这样的：

dist   |--css   |--js   |--images   |--index.html

（当然，可能你的静态资源会出现在 static 文件夹里，这要看你是否配置了 assetsDir: 'static'）

打开 index.html 文件看一下，大概是这样的：

`