vue-cli中設置publicPath：一個nginx部署多個項目時使用

執行npm run build打包后，生成的dist文件如下：

1、當設置publicPath為/時

修改vue.config.js文件

module.exports = {
 publicPath: '/',
    configureWebpack: {
        resolve: {
          //設置別名
          alias: {
            'assets': '@/assets',
            'components': '@/components',
            'views': '@/views',
            'store': '@/store',
            'utils':'@/utils',
            'api':'@/api',
          }
        }
    },
    devServer: {
        port: 9628,
    },
    lintOnSave: false
}

在vue項目根目錄中使用命令npm run build創建輸出文件，將dist文件夾下的所有內容復制到nginx目錄下的webapp/內（沒有的話自行創建）。

項目部署到nginx中，nginx配置如下：

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;



    sendfile        on;

    keepalive_timeout  65;
    upstream pts{
        server localhost:8081;  
    }

    server {
        listen       8880;
        server_name  localhost;

 location / { root webapp; index index.html index.htm;
        }
        location ~^/api/ {
            proxy_pass http://pts;  
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

將后台部署到tomcat並啟動，將前端部署到nginx並啟動

部署后請求路徑

http://localhost:8880/css/app.788b254a.css

效果如下：

2、當設置publicPath的值為/vue1時

 修改vue.config.js文件

module.exports = {
    publicPath: '/vue1/',
    configureWebpack: {
        resolve: {
          //設置別名
          alias: {
            'assets': '@/assets',
            'components': '@/components',
            'views': '@/views',
            'store': '@/store',
            'utils':'@/utils',
            'api':'@/api',
          }
        }
    },
    devServer: {
        port: 9628,
    },
    lintOnSave: false
}

在vue項目根目錄中使用命令npm run build創建輸出文件，將dist文件夾下的所有內容復制到nginx目錄下的webapp/vue1內（沒有的話自行創建）。

項目部署到nginx中，nginx配置如下：

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;



    sendfile        on;

    keepalive_timeout  65;
    upstream pts{
        server localhost:8081;  
    }

    server {
        listen       8880;
        server_name  localhost;


 location /vue1 { root webapp; index index.html index.htm; }
        location ~^/api/ {
            proxy_pass http://pts;  
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

將后台部署到tomcat並啟動，將前端部署到nginx並啟動

部署后請求路徑

http://localhost:8880/vue1/css/app.788b254a.css

效果如下

注意：加上publicPath的原因是：有時一個Nginx中放了好幾個子項目，需要將不同的項目通過不同的路徑來訪問。

對於項目1而言，修改vue.config.js文件的publicPath：

publicPath: '/vue1/'

對於項目2而言，修改vue.config.js文件的publicPath：

publicPath: '/vue2/'

分別在vue項目根目錄中使用命令npm run build創建輸出文件，將dist文件夾下的所有內容復制到nginx目錄下的webapp/vue1和webapp/vue2內（沒有的話自行創建）。

修改nginx目錄中的conf/nginx.conf文件，在 http -> server 節點中，修改location節的內容：

location /vue1 {
    root   webapp;
    index  index.html index.htm;
}

location /vue2 {
    root   webapp;
    index  index.html index.htm;
}

在nginx根目錄使用命令nginx -s reload即可在瀏覽器中通過http://localhost/vue1、http://localhost/vue2訪問項目1、項目2。