一般我们在部署项目的时候是直接部署到nginx的html下，即根目录下面，但是有时候项目比较多的时候，我们会在html下面新建一个目录，对我们的项目进行部署，即部署到二级目录。

一、若依前端项目打包

1、了解history和hash区别

若依作为vue项目，打包分history和hash两种类别，区别如下：

形式上：hash模式url里面永远带着#号，开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url，适合推广宣传；

功能上：比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok了

2、一级目录打包

修改相应地方的IP地址后，直接执行如下命令即可打包

#构建测试环境 
npm run build:stage
#构建生产环境 
npm run build:prod

3、二级目录打包

在进行二级目录打包的时候，我们需要做几个调整

3.1、publicPath调整

说明：例如 www.dfec.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 www.dfec.vip/project/，则设置 baseUrl 为 /project/。

调整位置：vue.config.js

3.2 路由中的base调整

说明：base表示所有的应用在请求页面的时候找的路径

位置：

3.3 登出调整

对于base和publicPath的详细说明可参考：blog.csdn.net/atu1111/art…

执行打包命令

cnpm run build:prod

二、nginx配置

复制项目到二级目录

将以上打包文件复制到nginx的html/project路径下

配置nginx.conf

基于alias的配置


#user  nobody;
worker_processes  1;


events {
    worker_connections  8192;
}


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

    sendfile        on;

    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       9009;
        server_name  localhost;
		
     	location  ^~/project {  
            alias   D:/programSoft/nginx/nginx-1.12.2/html/project;
            index  index.html index.htm;
            try_files $uri $uri/  /project/index.html;
        
        }
		
        location  ^~/admin {  
            alias   D:/programSoft/nginx/nginx-1.12.2/html/admin;
            index  index.html index.htm;
            try_files $uri $uri/  /admin/index.html;
        
        }
	

  
    }
  

}

说明：

前端页面请求为 http://localhost:9009/project

先匹配到location为project的位置，然后根据alias配置的位置去查找index中配置的index.html页面。

基于root的配置


#user  nobody;
worker_processes  1;


events {
    worker_connections  8192;
}


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

    sendfile        on;

    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       9009;
        server_name  localhost;
		
        root   D:/programSoft/nginx/nginx-1.12.2/html;
 
        location  ^~/project {  
		    index  index.html index.htm;
            try_files $uri $uri/  /project/index.html;
		
        }
		
	 
		location  ^~/admin {
           index  index.html index.htm;
           try_files $uri $uri/ /admin/index.html;
		
        }
	

  
    }
  

}

说明：

前端页面请求为 http://localhost:9009/project

先匹配到location为project的位置，然后根据root路径，将当前请求的project追加到root后面，然后去index中配匹配index.html页面。

附加说明： try_files $uri$ uri/ /admin/index.html;

这个 Nginx 的配置指令 "try_files" 告诉 Nginx 按照指定的顺序搜索文件，并返回先找到的文件。

$uri：这告诉 Nginx 在请求的 URI 路径中查找文件。
$uri/：这告诉 Nginx 在指定的 URI 路径中添加斜杠并查找文件。
/admin/index.html：如果 Nginx 找不到带有指定 URI 路径的文件，它将返回此文件。

总之，这个配置告诉 Nginx 试着提供请求的 URI，带有斜杠的 URI，如果两者都失败，就返回 /admin 子目录中的 index.html 文件。

若依项目部署到二级目录