nginx部署vue项目(成功版)

1、nginx介绍

2、下载nginx

3、打包vue项目

4、把vue项目安装到nginx

5、修改nginx配置文件

6、启动、关闭nginx

7、报错及解决

 

1、nginx介绍

nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。

2、下载nginx

http://nginx.org/en/download.html，下载稳定版 Stable version

3、打包vue项目

vue项目文件目录下运行命令：npm run build，将项目打包好，然后当前项目目录下有一个dist文件夹，该文件夹下有一个index.html和static文件夹。

4、把vue项目安装到nginx

把打包好的dist文件夹拷贝到安装nginx里的html文件夹下

5、修改nginx配置文件

配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段

server { listen       8887;

        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {

            root   C:/nginx-1.18.01/html/dist/; #nginx里html的dist文件夹路径

            index  index.html index.htm;

        }

        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件

        #因此需要rewrite到index.html中，然后交给路由在处理请求资源

        location @router {

            rewrite ^.*$ /index.html last;

        }

        # location / {

        #     root   html;

        #     index  index.html index.htm;

        # }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html

        #

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        } #....... }

6、启动、关闭nginx

启动 start nginx.exe

关闭 nginx -s stop    或者    nginx -s quit

stop表示立即停止nginx,不保存相关信息

quit表示正常退出nginx,并保存相关信息

重新加载配置文件 nginx -s reload

浏览器中访问：http://localhost:88887

7、报错及解决

7.1 nginx: [error] CreateFile() "E:\nginx\nginx-1.9.3/logs/nginx.pid" failed

使用命令创建/logs/nginx.pid文件：nginx -c conf/nginx.conf

7.2 CreateDirectory() "D:\abc\nginx-1.9.3/temp/client_body_temp" failed (3: The system cannot find the path specified)

进入ng根目录，创建temp/client_body_temp目录，重启nginx，恢复正常。

7.3 nginx: [emerg] invalid number of arguments in "root" directive in nginx/nginx.conf:41

因为命名的文件是会以文件路径的形式出现在nginx的配置文件中的，而且配置文件中是不允许文件路径中存在空格的。