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

1、下载Nginx压缩包

下载地址 https://nginx.org/en/download.html 我下了(1.16.1)
Windows 安装 Nginx, 本地访问vue打包项目_第1张图片

我们下载稳定的版本
下载完毕后解压到文件夹
Windows 安装 Nginx, 本地访问vue打包项目_第2张图片

二、启动与停止Nginx

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

Windows 安装 Nginx, 本地访问vue打包项目_第4张图片
关闭 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目录下,并在配置文件指向路径
Windows 安装 Nginx, 本地访问vue打包项目_第5张图片
Windows 安装 Nginx, 本地访问vue打包项目_第6张图片
Windows 安装 Nginx, 本地访问vue打包项目_第7张图片
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://cgerptest.visfarm.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/*后面的路径直接拼接到后面
	}

三、在浏览器访问Nginx

打开浏览器输入localhost:8800

你可能感兴趣的:(工具下载,nginx,vue.js,前端)