windows使用nginx部署vue项目

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

3、安装nginx

可参考这里
找到 安装目录\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】，拉你进群，大家一起交流学习。
如果文章对您有帮助，请我喝杯咖啡吧！

公众号

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