本文已在我的公众号上发布，更多原创技术文章，请关注我的公众号“字节逆旅”

如题，项目部署我们都经历过，这个过程也是十面埋坑。其实部署vue应用比较简单了现在，特别是cli3出来后，比以前要容易多了。这里记录一次在nginx同一端口下部署多个vue应用的过程。nginx用来做代理很好用，可以解决跨域问题。

那么，如何在一个端口号下部署多个应用呢？这个需求有什么用？比如你的一个服务器上部署了很多应用，各个项目的，每个都占用一个端口，那可能现在还要映射到外网去，方便给客户演示。这个资源总是有限的，所以如果能省一个端口最好就省一个。特别是像一个项目里有多个子系统，各系统又是独立开发的，这种情况就更有必要了。

工具包括vue+vuecli3+nginx

其实这个顺序应该是从nginx讲起，如果没经验的可以先看第二步nginx配置

前端配置其实就是为了约定一个路由，这样在nginx配置好了之后可以访问到自己的资源。

可以这么想，原本我一个端口下只有一个项目，那我的资源就跟我开发时一样就行了，随便访问。现在这个端口下多了一个项目，那我访问资源时是不是得区别标记一下，这个区分要前后端约定好才行。

vue的前端路由其实就是在前端匹配url地址变化来找到想要的页面，那我们现在要在服务器上加上一个项目，我们把新项目的url进行一些特定配置就好了。所谓配置，就是加一个url路径'/newProject/'(你自己定义）就可以了。

这里要分vuecli2和vuecli3两种环境，只讲vuecli3的，与vuecli2不同的地方我提下位置你就可以自己找了。

在vue.config.js文件下找到publicPath配置，添加如下配置（vuecli2就是config文件夹下的assetsPublicPath配置）

这个配置在官方文档上有说明，就是要注意区分开发环境与生产部署环境。生产环境上我们跑起项目时是不需要在url上加上这个newProject的，加上这个，是因为后面部署的时候nginx会根据这个来区分不同的项目。

在部署环境下， a、img、link、form这些标签要找到对应资源，也要先匹配nginx环境，所以要在head节点下加上base配置。

base标签为页面上的所有链接规定默认地址或默认目标。

打包之后，你的html页面看起来就是这样：

这一步就是将vue项目中的页面路由切换加上这个添加的url路径，在router的初始化步骤下添加：

如果你的项目单页面服务在/index/下，一般默认情况下vuex的基路径base配置默认是'/index/'。这里的配置同样是根据环境来区分，部署环境同样要加上'/newProject'。

这个没写步骤，直接看完整配置吧。'location /' 和'location /newProject'这两块就是我说的两个应用，大概意思就是这两个应用要共用20000这个端口（'location ^~ /api/ '这个是接口api映射配置点，本文不讨论，你可以忽略）。

配置基本就是这样，可以结合自己项目参考下，直接copy修改下就行。

我简单介绍下要点：

a、D:/deploy/web下的a、newProject项目分别在不同的文件夹里，它们所在位置不重要，重要的是nginx可以找到并且发布出来。

b、a文件夹的地址前缀是root，newProject文件夹的地址前缀是alias。

c、try_files后面的内容也不一样，自己注意看，我不细说了。

下面我讲一下nginx配置基础知识。

root与alias主要作用就是解释location后面的uri，root意思就是根据root路径+locationn路径找到资源；alias意思就是用alias路径替换对应的location路径内容。

可能不懂nginx的人有点懵，有人会问try_files uri uri/ @router; 这句话是什么意思？我简单解释下：

try_files字面意思就是尝试文件，再结合语境就是“尝试读取文件”，这里就是要读取静态文件

$uri 这个是nginx的一个变量，存放着用户访问的地址,

比如：http://www.aa.com/index.html, 那么$uri就是 /index.html

uri/就是 /nginx/test/

完整的解释就是：try_files 去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回当前值；如果第一个不存在继续读取第二个变量，如果存在，返回当前值；如果不存在就跳转到第三个参数上。

现在来看看第三个参数：@router，这个参数叫location，配置的是rewrite，重写规则。比如上面的rewrite ^.*$ /index.html last; ，这句意思就是一个重定向。比如你是这个地址http://www.baidu.com/xxx.html，它会跳转到http://www.baidu.com/index.html/xxx.html

好了，在nginx下配置多个vue项目已经讲完了，希望对你有用，也可以点个在看，帮助更多人。

本文发表在我的公众号 字节逆旅，如果对大前端技术感兴趣，欢迎关注！

本文使用 mdnice 排版