nginx打包部署vue-element-template以及配置后台接口转发(实战不啰嗦)

nginx打包部署vue-element-template以及配置后台接口转发(实战不啰嗦)

一、打包vue项目

vue.config.js内容修改

#publicPath: '/'修改成下面
publicPath: './'


#打包
npm run build:prod

#拷贝dist到任意的目录下面

二、配置nginx

#修改server里面的
将root后的地址改为你的dis路径，这是windows路径
  location / {
	    root	     D:\app\dist;
	    try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
 #添加路由重写
 location @router {
            rewrite ^.*$ /index.html last;
        }    
 
 #下面是http://127.0.0.1:8888你的后台接口地址，按照你的请求接口规则，这是以api开始
 	location /api {
	 proxy_pass http://127.0.0.1:8888;
	}

三、重启nginx,复习下命令

#启动nginx

start nginx

#停止nginx

nginx -s stop

#重启nginx

nginx -s reload