nginx部署vue项目(成功版)
1、nginx介绍
2、下载nginx
3、打包vue项目
4、把vue项目安装到nginx
5、修改nginx配置文件
6、启动、关闭nginx
7、报错及解决
1、nginx介绍
nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。
2、下载nginx
，下载稳定版 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: ginx ginx-1.9.3/logs/nginx.pid" failed
使用命令创建/logs/nginx.pid文件：nginx -c conf/nginx.conf
7.2 CreateDirectory() "D:abc ginx-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的配置文件中的，而且配置文件中是不允许文件路径中存在空格的。
