vue项目部署在nginx上的那些事

 

默认项目已经打包完成。

说到nginx就不得不提反向代理，在vue项目中为了解决跨域，我们使用了代理的方式，

而部署到服务器上，之前代理的api就要反向代理回来，否则就是404

这里贴上 相关的代理与反代理（将dist目录下的内容拷贝至nginx中的html文件夹里）

vue中的代理

proxy: {

'/api': {

target: 'http://www.uelaw.cn:8001/api', // 接口域名

changeOrigin: true, //是否跨域

pathRewrite: {

"^/api": "" //需要rewrite的,

},

secure:false ,

logLevel: "debug"

}

 

}

nginx.conf中的反代理

location /api {
proxy_pass http://www.uelaw.cn:8001/api;
}

修改完配置后先保存，再nginx -s reload

至此，我们的部署工作就宣告完成了。

部署过程中遇到的问题：

1.nginx -s reload报错找不到.pid文件

解决方法：nginx -c +nginx.conf所在目录，我的如下：

若无错，也没有提示，打开一个新的cmd，开启nginx服务即可

若报错且错误如下：

2.

这是nginx的默认80端口被占用，使用命令去看一下哪些进程占用了80端口。

启动任务管理器，关闭占用80端口的进程。然后再执行1中的命令，执行完后打开新的cmd，开启nginx服务即可。

3.其他问题

如果开启了多个nginx服务也会出错，此时一定要记得再每一次reload之后，要杀死已经存在的nginx进程，然后在开启即可