记录本地Nginx发布vue项目

                                        一、前端:vue-cli-service build

记录本地Nginx发布vue项目_第1张图片

二、下载Nginx,并创建目录,放置静态文件

记录本地Nginx发布vue项目_第2张图片

                                          三、在conf目录下nginx.conf文件配置代理服务

server {
        listen       8787;
        server_name  localhost;

    location / {
       	   root app/dist; #前端dist包地址
           index    index.html   index.htm;
	}
	 #代理后端接口
	location /demo/{
	  add_header Access-Control-Allow-Origin *;
	  add_header Access-Control-Allow-Methods "GET,POST,OPTIONS,PUT,DELETE";
	  add_header Access-Control-Allow-Headers "Token,DNT,X-Mx-ReqToken,keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization";
	  proxy_pass http://192.168.1.33:9999/demo/;
	}

第四、运行Nginx,并访问http://localhost:8787/

                                        第五、一些命令必须在Nginx安装目录下执行

nginx -s reload # 重新载入配置文件
nginx -s reopen # 重启 Nginx
nginx -s stop # 停止 Nginx
start nginx # 启动 Nginx

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