windows下nginx的安装和vue项目的部署

素颜马尾好姑娘i 2022-12-08 05:18 231阅读 0赞

## 1. nginx 的安装与使用 ##

windows系统下 nginx 的安装非常简单，直接在 [nginx 官网][nginx]下载 windows 版本的 nginx ，解压即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]  
要注意解压到不含中文的路径中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 1]  
直接双击 nginx.exe 应用程序运行即可（会出现一闪而过的黑框）  
浏览器输入 `localhost:80` ，出现下面的页面就说明 nginx 启动成功了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 2]

## 2. 部署 vue 项目 ##

先将 vue 项目打包

npm run build

打包完成后生成 dist 文件夹，将 dist 文件夹移动到 nginx 文件夹下的 html 文件夹中  
![在这里插入图片描述][20200918113404317.png_pic_center]  
修改 nginx 的配置文件，找到 nginx/config/nginx.conf 文件  
修改如下内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 3]  
修改完成后，进入nginx 的 cmd，重启 nginx

nginx -s reload

打开 localhost:8088/IP地址:8088

[nginx]: https://nginx.org/en/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5ed7abc1dd7a404c913ee7462c54417e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/b0d0a6304b374a75a56878c0edf33381.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/ea13e9ecd1104bf6b4a11ff948e3fcf2.png
[20200918113404317.png_pic_center]: /images/20221123/fe949b25c8aa434fadbdd8eea7405abd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/1c202c31f2de4f978765f88b7cac2aaf.png