博客

项目场景：

软件环境 windows10 , vue 2.0, nginx-1.22.1, npm 8.1.1

1. 在vue项目中使用命令
   
   npm run buil
   
   打包项目，在根目录下得到
   
   dist
   
   文件夹

2. 在nginx官网下载最新的1.22.1版本，在windows下直接解压使用

3. 拷贝dist文件夹到nginx根目录下的html文件夹里面

4. 在cmd命令行中进入nginx根目录，使用命令
   
   start nginx
   
   启动nginx（重载
   
   nginx -s reload
   
   ， 杀死进程
   
   taskkill /f /im nginx.exe
   
   )
   
   

5. 打开浏览器，根据配置的端口和ip访问项目

问题描述

1. 我将dist文件夹重命名为
   
   aa
   
   ，将其作为项目名称， 然后配置
   
   conf
   
   文件夹下的nginx.conf文件

server {
        listen       8088; # 改了端口
        server_name  localhost; # 默认的
        # 默认的
        location / {
            root   html;
            index  index.html index.htm;
        }
        # 我添加的
        location /aa {
            root   html/aa;
            index  index.html index.htm;
        }

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

2. 在chome浏览器中访问地址 “localhost:8088/aa”，可见404错误
   
   
3. 如果配置错误，nginx无法启动，访问出错如下
   
   
4. 再次配置conf文件，添加
   
   try_files $uri $uri/ /aa/index.html;
   
   ，重启nginx并重新访问，可见500错误

location /aa {
            root   html/aa;
            index  index.html index.htm;
            try_files $uri $uri/ /aa/index.html;
        }

5. 再次调整conf文件， 修改成 ** try_files $uri $uri/ /index.html;**，返回的是nginx的默认首页



6. 再次调整conf文件，修改成

try_files $uri $uri/ @router;

,遇见

An error occurred.

的错误



7. 后面再怎么配置都会遇到404或500错误，真的怀疑人生。

原因分析：

看了网上的教程，在nginx下配置多个项目，需要将打包的dist拷贝到nginx根目录下的html文件夹中，然后在conf文件中添加配置location，但是我怎么改配置都于事无补


我删掉了配置，还原conf为初始配置

，竟然成功了

我猜可能是版本问题，nginx升级了，简化了配置，甚至不需要配置，

无法进行深入的分析

解决方案：

还原conf为初始配置，初始配置只有一个location，所以最终只是将dist文件拷贝到html中，然后重命名（改成想要的项目名称），启动nginx即可

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