windows使用nginx部署vue项目

妖狐艹你老母 2022-09-16 11:30 604阅读 0赞

### 1、下载npm ###

官网：https://nodejs.org/en/download/  
双击文件夹中的【node-v12.16.1-x64.msi】，按默认安装即可

win+R 打开cmd命令窗口：

# 查看版本
    node -v

有出现版本号说明安装成功。

### 2、生成dist文件 ###

在vue项目目录下，打开cmd，输入命令

npm run bulid

如果报错：  
npm ERR! missing script: build  
则使用命令

npm run build:prod

具体看package.json  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Lic5pyo5pyI_size_20_color_FFFFFF_t_70_g_se_x_16]

### 3、安装nginx ###

可参考[这里][Link 1]  
找到 安装目录\\nginx-1.20.1\\conf中的nginx.conf，添加

server {
    		listen 9511;
    		server_name localhost;
    		location / {
    			add_header Access-Control-Allow-Origin *;
    			root D:/job/gs/pro/gzgs-2/dist/; 
    			index index.html;
    			autoindex on;
    		}
    		location /api/ {
    			proxy_pass http://localhost:8001;
    			proxy_redirect off;
    			proxy_cookie_path / /api/;
    		}
    	}

注：我这个是前后端分离的  
如果是单纯的静态文件，可添加：

server {
    		listen 9510;
    		server_name  localhost;
    		
    		location / {
    			add_header Access-Control-Allow-Origin *;
    			root   D:/job/gs/pro/nginx_files/; 
    			autoindex on;
    		}
    	}

双击 安装目录\\nginx-1.20.1下的nginx.exe启动nginx，  
然后在浏览器打开 localhost:9511即可看到vue项目启动了。

## 后记 ##

【后记】为了让大家能够轻松学编程，我创建了一个公众号【轻松学编程】，里面有让你快速学会编程的文章，当然也有一些干货提高你的编程水平，也有一些编程项目适合做一些课程设计等课题。

也可加我微信【1257309054】，拉你进群，大家一起交流学习。  
如果文章对您有帮助，请我喝杯咖啡吧！

公众号

![公众号][20200317124808234.jpg]

关注我，我们一起成长~~

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Lic5pyo5pyI_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/9554964804244a42be4ec62d74e133f2.png
[Link 1]: https://liangdongchang.blog.csdn.net/article/details/119823713
[20200317124808234.jpg]: /images/20220828/d2b0f0cfe2ba464f9f84b20c1f19833e.png