vue 项目在 nginx 非根目录下部署时访问404的问题

vue 项目在 nginx 非根目录下部署时访问404的问题

当 vue 打包时，若是项目路径不是部署在根目录下时，好比部署在 /new 目录下。这种状况下，使用 简单部署 的方法进行部署会产生 404 错误，即没法找到相关资源，好比静态资源。前端打包配置时部分代码示例以下：

// 项目部署基础
// 默认状况下，咱们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 若是您的应用程序部署在子路径中，则须要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 须要将它改成'/my-app/'
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/new/'
  : '/'

nginx 配置修改，假设作了跨域代理。核心代码以下：

server {
   listen       1081;                    
   server_name  localhost;
       
   location ^~/new {
   		alias html/dist-new;
   		#index index.html;
   		try_files $uri $uri/ @rewrites; 
   }    
   	       
   location @rewrites {
   		rewrite ^/(new)/(.+)$ /$1/index.html last;
   }
   	
   # 设置代理，解决接口跨域问题
   location /api {
   		rewrite  ^/api(.*)$ /$1 break; 
   		proxy_set_header x-forwarded-for $remote_addr;
   		proxy_pass   http://127.0.0.1:8105;
   }
}