Windows下Nginx安装与配置教程----vue打包上线流程，ngnix服务器配置（路由history模式白屏如何处理）

头发快掉没了的程序猿

于 2021-06-07 10:32:59 发布

阅读量307

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/LiuBo_1999/article/details/117652073

这篇博客介绍了在Windows环境下安装Nginx的步骤，包括下载Nginx，解压到无中文路径的文件夹，通过控制台启动和管理Nginx服务。同时，文章详细讲解了vue项目打包上线的流程，重点讨论了路由history模式导致的白屏问题及其解决方案。在Nginx的配置文件中进行适当设置后，项目可以正常访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载Nginx
官方下载地址
在这里插入图片描述
下载后，将nginx-1.15.2.zip解压注意不能解压到带中文的文件夹中
可以看到以下的目录

控制台（CMD）切换到Nginx目录下，输入start nginx ，然后在浏览器页面输入localhost，出现如下界面则表示安装成功。默认监听80端口号。
在这里插入图片描述
nginx命令介绍
（1）start nginx 开启nginx服务
（2）nginx.exe -s stop 关闭nginx服务，快速停止nginx，可能并不保存相关信息
（3）nginx.exe -s quit 关闭nginx服务，完整有序的停止nginx，并保存相关信息
(4) nginx.exe -s reload 重载nginx服务，当你改变了nginx配置信息并需要重新载入这些配置时可以使用此命令重载nginx
(5) 使用 taskkill /F /IM nginx.exe > nul命令强关nginx服务器

访问自己的项目
打包好的项目放到html中
在这里插入图片描述
还需要在conf/nginx.conf中配置

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

配置完成后项目就可以

最低0.47元/天解锁文章