多VUE同端口部署

1. 修改vue的vue.config.js

module.exports = {
  publicPath: '/nft-demo-web/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',

设置publicPath使所有路由带有固定前缀/nft-demo-web/

2. 配置Nginx

server {
      listen        8088;
      server_name   localhost cbs-doc.cosmoplat.com;
      client_max_body_size 500m;
      include  /etc/nginx/mime.types;

      location / {
        root /data/baashelpdoc/site;
        try_files $uri $uri/ @router;
        index  index.html  index.htm;
      }
    ##这里就是配置Vue前缀的
      location /nft-demo-web {
        alias  /data/nft-demo-web;
    ##这里必须是/nft-demo-web/ 不然刷新一下 就404了
        try_files $uri $uri/  /nft-demo-web/index.html;
        index  index.html  index.htm;
      }

      location @router {
        rewrite ^.*$ /index.html last;
      }
    
    ##这里配置 https 访问 http的图片
    location /static/img {
        alias  /data/nft-demo/static/img;
        autoindex on;
    }
  ## Vue 后台服务转发
      location /v1/ {
       proxy_pass http://10.206.38.21:8100/v1/;
     }
}

3. 注意服务器的路径必须和vue里的publicPath一致即nft-demo-web 使用默认的dist 不行
   我的路径如下

[root@cosmo-qkl02 nft-demo-web]# ls
favicon.ico  index.html  start.sh  static
[root@cosmo-qkl02 nft-demo-web]# pwd
/data/nft-demo-web