Nginx部署两个vue项目

公司要求一个URL下连接两个项目，查阅了半天了解到nginx，研究了研究终于搞定了，记录一下过程，方便以后温习。

线上nginx搭建是后台写的，开发环境是前端（也就是我）写的，所以文章是以前端角度描述的。

首先主域名是www.url.com，要绑定的子域名是www.url.com/two（two是第二个项目的名字）

第一个项目默认为根url，'/' 就自动选择第一个项目，第二个项目为 '/two' ， url输入www.url.com/自动选择第一个项目，url输入www.url.com/two自动选择第二个项目。

先下载nginx，找到nginx.conf文件，修改配置

server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   第一个项目的本地路径;
            index  index.html index.htm; //默认选择的页面
            try_files $uri $uri/ /index.html;//刷新跳转的页面，防止404
        }
         location /two{
            alias   第二个项目的本地路径;
            index  index.html index.htm;
            try_files $uri $uri/ /supplier/index.html;
        }
    }

然后配置项目，第一个项目不用写

在第二个项目vue.config.js

module.exports = {
  // publicPath: process.env.NODE_ENV === 'two'? '/two/': '/',这个是是生产者环境的值 
  publicPath: '/two/',//因为既然已经决定把它当子路径用了就直接设置，不判断了。
 }

在第二个项目vue-router里的index.js

const router = new VueRouter({
  mode: 'history',
  //加上base，把应用的基础路径改为/two/
  base: '/two/',
  routes
})

这样nginx和项目就配置完了,然后打包dist文件，启动nginx,就可以了

有个缺点是每次更新完代码都要重新打包一次nginx才可以同步到页面上，因为就开发一个小功能，就没写这块，望各位大佬优化一下。