nginx如何部署多个web应用(vue)

服务器资源与域名资源都是有限的，如何在同一个域名下部署多个vue项目（nginx反向代理），通过域名后面的不同的URI来访问不同的应用，来解决资源不足的问题，在此期间遇到了一些问题，在此记录一下。

此文章以访问名称abc为例说明：http://www.domain-name.cn/abc

1、nginx配置

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location  ^~ /abc {
            alias /home/xxx/web/dist/abc/;
            try_files $uri $uri/ /abc/index.html;
            index  index.html index.htm;
        }

        location ^~ /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;
        }

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
           root /home/xxx/web/dist/;
        }

        location ~ .*\.(js|css|woff|tff)?$
        {
           root /home/xxx/web/dist/;
        }

注意：

locaiton： location ^~ /abc 和location ^~ /prod-api/，开头必须有^~

alias：alias /home/xxx/web/dist/abc/; 此处使用alias，不能使用root，同时路径最后必须有“/”

…/dist目录下，必须有个abc的文件夹，里面才是vue打包后的文件

2、VUE项目

router下的index.js文件修改，添加base：abc

export default new Router({
  mode: 'history', // 去掉url中的#
  base: 'abc',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

vue.config.js文件修改，添加abc

 publicPath: process.env.NODE_ENV === "production" ? "/abc/" : "/abc/",