Nginx快速入门_3:反向代理实例之部署Vue项目
Nginx快速入门_3:反向代理实例之部署Vue项目零、前提1.后端已经部署,我部署在8081端口2.nginx已经安装3.前端项目在本地已经能实现前端的跨域一、VUE项目的打包1.1修改在config中的index.js文件在里面的build对象中,修改assetsPublicPath为’./’(注:这样,打包出来的页面就不是空白)1.2修改在build中的utils.js文件(可能非必需配置)
Nginx快速入门_3:反向代理实例之部署Vue项目
零、前提
1.后端已经部署,我部署在8081端口
2.nginx已经安装
3.前端项目在本地已经能实现前端的跨域
一、VUE项目的打包
1.1修改在config中的index.js文件
在里面的build对象中,修改assetsPublicPath为’./’
(注:这样,打包出来的页面就不是空白)
1.2修改在build中的utils.js文件(可能非必需配置)
注:这个配置的前提是如果出现Failed to load resource: net::ERR_FILE_NOT_FOUND的错误的话
在这个文件50行左右的位置加一句
publicPath: '../../',
注:如果这样还是不能解决问题的话,请尝试其他方法
参考链接:https://blog.csdn.net/zhangzuruiqqq/article/details/116191549
1.3 开始打包
npm run build
这时我们就可以把生成的dist文件扔到服务器就可以了。我这里使用xshell进行远程连接,xftp进行文件传输。
注:打包后放服务区的前提是在本地能直接运行打包后的html文件,且没有问题。如果出现接口非404报错之类的问题,都要在本地解决后再上传
二、配置nginx
修改nginx的配置文件(在哪里修改见之前的文章)
在 http{ } 中配置一个server
server {
listen 8083;#1.这里设置的同前端运行的端口号一样
listen 121.4.54.105;#2.这是服务器的ip
# server_name somename alias another.alias;
location / {
root /home/dist/; #3.dist文件的位置
try_files $uri $uri/ /index.html; #4.重定向,内部文件的指向(照写)
}
location ^~/api/ { #4.当请求跨域时配置端口转发
proxy_pass http://121.4.54.105:8081/; #5.转发地址
}
}
注1:转发地址的写法一定要注意格式,包括结尾部分的符号 /
具体语法参考:https://www.cnblogs.com/cnblog-long/p/11690329.html
注2:配置完之后记得reload一下,以及开放一下端口
其他可参考文档:
vue项目部署到nginx:https://blog.csdn.net/weixin_42565137/article/details/90577950
其他部署干货博客链接:
完整发布项目到服务器流程介绍(包括实现通过域名访问):https://www.csdn.net/tags/MtTaMgzsMzg1MjEtYmxvZwO0O0OO0O0O.html
centos后台运行jar包:https://www.cnblogs.com/Alwaysbecoding/p/11299762.html
centos:查看本机公网ip curl ifconfig.me 121.4.54.105
查看端口进程: netstat -ntlp
vue开发环境与生产环境解决跨域问题:https://blog.csdn.net/yyj108317/article/details/110504369
https://blog.csdn.net/weixin_45745641/article/details/122484162
跨域问题的产生原因:https://www.jianshu.com/p/579c5c1f9f43
查看是否对外开放端口:https://www.jianshu.com/p/08db9220fd5a
查看服务器有那些端口开放,可以用netstat 查看
netstat -lt 查看所有tcp端口开放
Centos 安装Nginx:https://cloud.tencent.com/developer/article/1924770
安装时报错处理:https://blog.csdn.net/weixin_43916065/article/details/107710383
测试是否安装成功:https://www.cnblogs.com/monjeo/p/7570117.html
Centos tomcat的安装:https://www.cnblogs.com/lbrs/p/12113560.html
vue项目部署到nginx:https://blog.csdn.net/weixin_42565137/article/details/90577950
Failed to load resource: net::ERR_FILE_NOT_FOUND:https://blog.csdn.net/zhangzuruiqqq/article/details/116191549
nginx的语法:https://www.cnblogs.com/cnblog-long/p/11690329.html
更多推荐
所有评论(0)