Windows 安装 Nginx， 本地访问vue打包项目

1、下载Nginx压缩包

下载地址 https://nginx.org/en/download.html 我下了（1.16.1）

我们下载稳定的版本
下载完毕后解压到文件夹

二、启动与停止Nginx

打开dos窗口，切换到Nginx的目录下
输入 start nginx 来启动 nginx
启动后可使用 tasklist /fi “imagename eq nginx.exe” 命令来查看服务是否启动成功
如果启动成功，如图，可直接跳到第三步，进行访问

关闭 taskkill /f /t /im nginx.exe
nginx -s reload 刷新
输入nginx命令 nginx -s stop(快速停止nginx) 或 nginx -s quit(完整有序的停止nginx)

请进入Nginx目录下的config目录，打开 nginx.conf
找到80端口，修改为8800
修改配置重启在 E:\softInstall\nginx-1.16.1 下 nginx -s reload
打包文件放html目录下，并在配置文件指向路径



api名称 根据具体项目配置

  location / {
            root   html\dist;
            index  index.html index.htm;
	    #try_files $uri $uri/@router; #需要指向下面的@routen否则会出现vue的路由在nginx中刷新出现404
	    #try_files $uri $uri/ /index.html; ---解决页面刷新404问题
        }

	location ^~ /prod-api/ {  # ^~/api/表示匹配前缀为api的请求
	    # 跨域问题
	    add_header Access-Control-Allow-Origin *;
	    add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
	    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
	    proxy_pass http://xxxxxxipxxxx:8080/auth/;  # 注：proxy_pass的结尾有/， -> 效果：会在请求时将/api/*后面的路径直接拼接到后面
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

       location / {
            root   html\dist;
            index  index.html index.htm;
	    #try_files $uri $uri/@router; #需要指向下面的@routen否则会出现vue的路由在nginx中刷新出现404
	    #try_files $uri $uri/ /index.html; ---解决页面刷新404问题
        }
	# location ^~/basic-api/ { 
        #     #rewrite ^/basic-api/(.*)$ /$1 break; #重置api
        #     proxy_pass http://cg.vip.com/basic-api;  #****后端接口地址
        # }

	location ^~ /basic-api/ {  # ^~/api/表示匹配前缀为api的请求
	    # 跨域问题
	    add_header Access-Control-Allow-Origin *;
	    add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
	    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
	    proxy_pass http://aaaaa.com/basic-api/;  # 注：proxy_pass的结尾有/， -> 效果：会在请求时将/api/*后面的路径直接拼接到后面
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

三、在浏览器访问Nginx

打开浏览器输入localhost:8800