新項目：同一域名下部署多個vue項目，

根目錄vue項目不需要按下面的方式進行打包部署

https://www.bitedit.com/

下面三個項目以二級目錄部署

https://www.bitedit.com/hmange
https://www.bitedit.com/api
https://www.bitedit.com/restful

以上鏈接不可用，作為示例，不要點擊。此方法適用于多vue項目，二級目錄部署

server {listen       80;server_name  www.bytedit.com;access_log  /var/log/nginx/bytedit.access.log;error_log   /var/log/nginx/bytedit.error.log;location ^~/ {alias /usr/local/nginx/html/front/;try_files $uri $uri/ /index.html;index index.html;}location ^~/hmanage {alias /usr/local/nginx/html/hmanage/;try_files $uri $uri/ /hmanage/index.html;index index.html;}location ^~/restful {alias /usr/local/nginx/html/restful/;try_files $uri $uri/ /restful/index.html;index index.html;}location ^~/api {alias /usr/local/nginx/html/api/;try_files $uri $uri/ /api/index.html;index index.html;}location /profile/image {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://127.0.0.1:8081/profile/image;}
}

前端在打包靜態文件的時候需要進行以下修改：

1、在vue.config.js 配置文件中，publicPath 和 outputDir 都改為 '/子目錄名/'。

2、入口文件 index.html 的head 標簽內加入

新增 <meta base="/子目錄名/">

vim public/index.html
新增 <meta base="/hmanage/"> 

3、vue-router 路由文件的配置，填寫二級目錄

新增 base: '/子目錄名/',

vim src/router/index.js
新增 base:'/hmanage/',

4、nginx 配置以及前端資源根目錄

    location ^~/hmanage {alias /usr/local/nginx/html/hmanage/;try_files $uri $uri/ /hmanage/index.html;index index.html;}

此方法適用于，多項目二級目錄部署，親測可用。

總結

以上是生活随笔為你收集整理的vue项目nginx部署子目录_vue 多项目部署---二级目录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。