nginx服务器上部署多个vue项目——基于location配置

在实际开发过程中，一个项目体系总是包含着多个子项目，由于服务器端口号资源的稀缺，只能考虑能不能通过一个nginx服务器实现多个vue项目部署，共享一个端口了。

nginx服务器多项目部署

网上的针对项目部署的方法主要有三种：

1. 基于域名配置（土豪版本）
2. 基于location配置（低配版）
3. 基于端口配置（明显不适合开发需求）

我们先说低配版方法——基于location配置的方法
时间：没有多个端口且没有多个域名用于配置时
地点：nginx配置文件——nginx.conf
人物：有个储藏空间的nginx

nginx打开储藏控件查看了下里面有什么，其中发现配置文件nginx.conf中有一个location指向不同的位置，这就是关键点了。

其中一个关注点在于root与alias的区别，root说明是root所指的地址+location后面的地址，即“xxx/html/”以及“xxx/html/newlocation/”；如果是alias，其含义是指向该地址的别名，则只包含alias所指的地址，即“xxx/html/”以及“xxx/html/”。

另外一个关注点是try_files，其中关键之处在于访问的index.html所在的路径，例如"/"所指的路径是“/index.html”, “/newlocation”所指的路径是“/newlocation/index.html”。

vue项目打包注意事项

为了保证vue项目间的路由不发生冲突，在打包项目时，采用前缀名（如frontend）的方式区分每一个vue项目，同时将该前缀名(如frontend)用作nginx中文件夹名。
其中重要的位置有：路由、index.html以及编译配置文件，具体如下(举例使用frontend作为前缀名)：

1. 修改config文件夹下index文件中的build里的assetsPublicPath:"/frontend/"；
2. 修改router文件夹下index.js添加 base: ‘/frontend/’ （可以自己随意设置）；
3. 在index.html中修改资源引入路径，主要是针对其中的static文件夹，采用“/frontend/static/…”修饰；

最后，在nginx中的html文件夹中建立对应的文件夹（如frontend），并将vue项目中打包出来的文件（位于dist目录下）放到frontend目录中，从而可以通过“http://xxxxxx:xxxx/frontend/xxx”访问。

原创不易，如果觉得有点用的话，请不要吝啬你手中点赞的权力——因为这将是我写作的最强动力。