使用nginx同域名下部署多个vue项目并使用反向代理的方法

  // project1  module.exports = {   dev: {},   build: {    assetsPublicPath: '/project1/' // 注意前后的 ‘/'   }  }    // project2  module.exports = {   dev: {},   build: {    assetsPublicPath: '/project2/' // 注意前后的 ‘/'   }  }    

  // project1  module.exports = {   NODE_ENV: '"production"',   BASE_API: '"/api/pro1"' // 这里待会与 nginx 配置对应  }    // project2  module.exports = {   NODE_ENV: '"production"',   BASE_API: '"/api/pro2"' // 这里待会与 nginx 配置对应  }    

  // 我采用了 history 模式，hash 模式我没有测试，感觉应该是一样的效果  // project1  export default new Router({   base: '/project1/', // 注意更改你子项目名，这个对应你的 build.assetsPublicPath   mode: 'history',   scrollBehavior: () => ({ y: 0 }),   routes: []  })    // project2  export default new Router({   base: '/project2/', // 注意更改你子项目名，这个对应你的 build.assetsPublicPath   mode: 'history',   scrollBehavior: () => ({ y: 0 }),   routes: []  })    

  # 这个版本就是你的 package.json 中的版本，只不过你需要重新再指定这个版本    $ npm i html-webpack-plugin@4.0.0-alpha -D  

  .  ├─conf  │ ├─... # 其他文件  │ └─nginx.conf  │  ├─html # 只看这里，其他暂时我没用到   │ ├─project1  │ │ └─static  │ │   ├─css  │ │   ├─fonts  │ │   └─js  │ │     ├─g  │ │     └─V  │ ├─project2  │ │  └─static  │ │    ├─css  │ │    ├─fonts  │ │    └─js  │ │      ├─g  │ │      └─V  │ ├─index.html  │ └─50x.html  └─... # 其他文件  

  # ...  # 反向代理  http {    include mime.types;    default_type application/octet-stream;      #log_format main '$remote_addr - $remote_user [$time_local] "$request" '    #         '$status $body_bytes_sent "$http_referer" '    #         '"$http_user_agent" "$http_x_forwarded_for"';      sendfile    on;    keepalive_timeout 65;      client_max_body_size 20M;    client_body_buffer_size 10M;    large_client_header_buffers 4 128k;        # 这里可以做集群    upstream p1_server {      server localhost:8081;    }      # 这里可以做集群    upstream p2_server {      server localhost:8082;    }      server {      listen 8080;      server_name localhost;      charset utf-8;        proxy_connect_timeout 180;      proxy_send_timeout 180;      proxy_read_timeout 180;      proxy_set_header Host $host;      proxy_set_header X-Forwarder-For $remote_addr;        root html; # 这里指定刚刚我们的文件夹            # 总的项目路由，我偷懒直接写在了同一个文件      # 如果有很多可以在配置多个 conf 文件，使用 include 关联进来      location / {        try_files $uri $uri/ /index.html; # 这里可以理解指定到 html 文件夹下的 index.html      }            # project1      # 这里就是刚刚我们在 vue 项目中 config/index.js 的配置 build.assetsPublicPath，      # 也是 vue 项目中配置的 router 中的 base      location ^~ /project1 {        try_files $uri $uri/ /project1/index.html; # 这里可以理解指定到 html 文件夹下 project1 文件夹 的 index.html      }            # project2      # 这里是项目二的配置      location ^~ /project2 { #         try_files $uri $uri/ /project2/index.html; # 这里可以理解指定到 html 文件夹下 project2 文件夹 的 index.html      }            # 这里是 project1 配置需要调用的接口      location /api/pro1 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API         proxy_redirect off;        proxy_set_header Host $host;        proxy_set_header X-Real-IP $remote_addr;        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        proxy_pass http://p1_server; # 此处的 p1_server 对应的上面的配置 upstream p1_server {}，这里可以做集群，我用不到，就简单配置了      }             # 这里是 project1 配置需要调用的接口      location /api/pro2 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API        proxy_redirect off;        proxy_set_header Host $host;        proxy_set_header X-Real-IP $remote_addr;        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        proxy_pass http://p2_server; # 此处的 p2_server 对应的上面的配置 upstream p2_server {}，这里可以做集群，我用不到，就简单配置了      }        # ...    }      # ...  }    

  ...  <p><em>Thank you for using nginx.</em></p> <!-- 为了展示位置 -->    <!-- start: 追加-->  <hr>  <a href="/project1" rel="external nofollow" >项目一</a> | <a href="/project2" rel="external nofollow" >项目二</a>  <!-- end: 追加-->    </body> <!-- 为了展示位置 -->