前言
不清楚如何使用docker部署nginx的同志，可以去看我的另一篇博客：小白学习nginx（一）--docker创建nginx容器
部署vue项目
我这里希望同一nginx服务器部署多个vue项目，所以先在对应的html文件夹下根据对应项目名创建了对应目录。以user-management项目为例，在html文件夹下创建user-management目录，接下来将打包好的vue项目拷入该目录下，拷贝后的文件结构如下图：
这里可以看到static文件变成了二级目录。
配置nginx的default.conf文件
进入nginx的conf.d目录：
cd /usr/local/docker/nginx/config/conf.d
编辑default.conf,添加如下内容：
location /user-management {
alias /usr/share/nginx/html/user-management;
index index.html index.htm;
try_files $uri $uri/ /user-management/index.html;
}
添加后如下图：
备注：
- 因为是多项目部署，所以不能使用root指向对应的项目目录，应该使用alias,否则会报404或500错误.
- try_files是解决前端采用histroy路由，这里前端需要在路由配置添加base选项，地址填localtion的地址。否则会导致404。
配置完成后，访问项目发现空白页，因为static变成了二级目录，而静态文件的访问地址却还是url/static/***.js文件，导致404。这时候需要配置vue的配置文件，使其地址中拥有二级目录/user-management
配置vue项目
正常访问静态文件，访问地址如下图：
拥有二级目录后，同样的访问方式，就会404。
所以需要给vue文件添加二级目录，步骤如下：
- 修改静态文件/config/index.js中的
assetsPublicPath字段值，如下图：解释一下：
assetsPublicPath： 是webpack打包后的文件访问的静态资源路径的根路径，如果我们想在访问的域名后加入二级目录，那么就要在这里进行配置了。process.argv：是node的全局变量，我们在执行npm run build其实真实的命令行是node build/build.js！process.argv指的就是node命令行后的参数，argv是一个数组，第一个参数是process.execPath，第二个参数是当前执行的js文件路径，第三个参数开始指向我们在命名行后面加的参数了。
因此我们这样执行命令进行打包就可以了：
如此，node就可以获取到
process.argv[2]是user-management了，那么静态资源的路径就可以是/user-management了。
- 修改接口地址，接口地址不能使用
/user-management作为前缀了，否则访问接口就变成了访问静态文件。
配置完成后，打包项目，将dist目录下的文件拷贝到对应的项目目录下。就可以正常访问项目了。
