Windows系统中安装Nginx,及部署Vue项目在Nginx中
一、安装Nginx教程
- 官网下载地址:下载地址
- 下载教程:选择Stable version版本下载到本地
- 下载完成后,解压放入本地非中文的文件夹中:
- 启动nginx:双击nginx.exe,若双击未弹出内容,则说明端口被占用,请参照第6步
- 双击nginx.exe后出现在任务管理器中:
- 或者使用命令行:输入start nginx
- 使用命令出现在任务管理器中:
-
查看是否启动成功:在浏览器输入:http://localhost:3005,能看到以下界面说明启动成功
-
打开conf文件夹下的nginx.conf查看端口占用情况:
(1)nginx默认使用80端口
server {
#listen 80; //默认使用该端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
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;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
(2)端口被占用则自定义端口:
server {
#listen 80;
listen 3005; //这里修改为3005端口了
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
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;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
二、部署Nginx教程
- 将打包的dist文件放入nginx-1.22.1目录下的html文件夹中:
-
修改server:在nginx.conf文件中修改server(即部署后的地址)
-
再次打开http://localhost:3005,若出现如下图所示,则说明项目已经成功部署
注意:若是项目需要连接后端项目,切记不要关闭后端项目哦,后端项目要跑起来哦,这样整个LAN网络内均可以使用哦,其他pc访问所使用的地址:http://本机IP地址:端口号
至此项目部署步骤完成
三、卸载Nginx
-
查看与nginx相关的端口:
tasklist /fi "imagename eq nginx.exe"
netstat -ano |findstr 3005 //查看3005端口信息
-
停止nginx进程:
taskkill /f /t /im "nginx.exe"
-
**直接删除nginx相关文件:**点击Nginx相关文件夹 - 右键 - 删除即可
看到大家有说出现闪的问题(在文件夹双击nginx.exe的时候出现的),没事的哦,只要在任务管理器中有看到在nginx在运行就可以,安装过程中有问题可以私聊我哦