Windows 安装 Nginx，模拟真实环境访问项目，本地访问vue打包项目

林间风雨

已于 2023-03-23 15:03:33 修改

阅读量1.3k

点赞数

分类专栏：工具下载文章标签： nginx vue.js 前端

于 2022-09-08 10:24:28 首次发布

本文链接：https://blog.csdn.net/jack_rose_me/article/details/126745342

版权

工具下载专栏收录该内容

15 篇文章 1 订阅

订阅专栏

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/*后面的路径直接拼接到后面
	}

       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/*后面的路径直接拼接到后面
	}