nginx 发布vue项目

1、打包VUE项目，这里用uni-app做例子

打包成功后，复制到服务器。我的项目目录是/usr/local/soft/nginx-web/micro-mall-h5

2、进入nginx安装目录下的 conf/nginx.conf文件修改相关配置

listen  配置端口这里默认是80
修改location内容 当访问http://localhost:80时会先访问到“/” 接着去查找root对应的路径中的文件,找到执行启动页 index.html
       root  是项目指向的地址 /usr/local/soft/nginx-web/micro-mall-h5

       index 打包文件首页

3、配置完成后 执行sbin下的命令

     ./nginx -s reload  #重新载入nginx.conf配置文件

     ./nginx -s stop   #停止nginx  

     ./nginx  #启动nginx   

此时直接访问 http://ip  即可直接访问项目。

 

如果需要带项目名称部署，需要重新打包如下

上传到服务器目录  我这里上传到 /usr/local/soft/nginx-web/mall

修改nginx.conf文件如下，注意这里我把root换成了alias

然后执行 ./nginx -s reload     ./nginx -s stop   ./nginx 三个命令使配置生效，并重启nginx.

http://ip******/mall即可访问项目。

至此完成OK ,同时也实现了nginx下多项目的部署，如需再加项目直接添加location配置即可。如果需要新增端口，添加整个server配置

****location下root和alias区别****

root与alias主要区别在于nginx如何解释location后面的uri，这会使两者分别以不同的方式将请求映射到服务器文件上。
root的处理结果是：root路径＋location路径
alias的处理结果是：使用alias路径替换location路径
alias是一个目录别名的定义，root则是最上层目录的定义。
还有一个重要的区别是alias后面必须要用“/”结束，否则会找不到文件的。。。而root则可有可无~~

root示例如：

location /test {
            root    /usr/local/soft/nginx-web/;
            index  index.html index.htm;
        }

如果一个请求的URI是/test/index.html时，web服务器将会返回服务器上的/usr/local/soft/nginx-web/test/index.html的文件。这里root后面无需指定test目录即可,nginx会在root后拼上location路径

alias实例：

location /test  {
            alias  /usr/local/soft/nginx-web/mall_test/;
            index  index.html index.htm;
        }

如果一个请求的URI是/test/index.html时，web服务器将会返回服务器上的/usr/local/soft/nginx-web/mall_test/index.html的文件。注意这里是mall_test，因为alias会把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。

注意：

1. 使用alias时，目录名后面一定要加"/"。
3. alias在使用正则匹配时，必须捕捉要匹配的内容并在指定的内容处使用。
4. alias只能位于location块中。（root可以不放在location中）