在window上配置nginx

下载nginx包，下载的包包含如下文件。

修改conf文件夹里面的配置文件nginx.conf，首先把原有的配置文件备份一下（防止乱修改以至于nginx出错）。

需要认识nginx.conf里面的一些配置属性，可从菜鸟教程认识，网址：www.runoob.com/w3cnote/ngi…

修改文件，我是在window配置的nginx，主要修改了upstream和server里面的内容，修改后的文件如下：

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    upstream second_kill {
	    server localhost:8080;#前端项目是8080端口
    }
    server {
        listen       80;#nginx暴露出来的端口
        server_name  localhost;#nginx所在服务器
	    location / {
            proxy_pass http://second_kill;
            # proxy_set_header Host $host;
            # proxy_set_header X-Real-IP $remote_addr;
            # proxy_set_header X-Forwarded_For $proxy_add_x_forwarded_for;
        } 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

启动本地项目，本地项目不使用nginx时访问地址为localhost:8080

启动nginx，双击nginx包里面的应用程序。

浏览器通过localhost:80即可访问代理后的页面。

当问页面时，可能会出现下面的问题，提示 An error occurred，这时查看是否启动本地项目或者查看后台是否打开了多个nginx。 若出现invalid host header，则可能是vue-cli设置问题，在vue.config.js文件中的devServer加入historyApiFallback: true,allowedHosts: "all"配置。