vue-cli 配置服务端口反向代理

vue-cli 配置服务端口反向代理,第1张

第一次部署配置,关于部署vue项目dist包,在nginx配置遇到的坑:

1.vue项目中vue.config.js的配置:

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串:

2.打包后dist包部署到linux服务器上,Nginx配置反向代理实现ajax进行跨域访问:

conf目录下nginx.conf配置如下:

配置之后重启nginx即可 ./nginx -s reload

注意:开始漏了rewrite ^/prod-api/(.*) 1 break请求后台接口一直404 not found,

你的服务器是什么系统啊 ,,,linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git   nginx  vue-cli

安装好nginx 用你的公网ip访问就可以看到 下面的页面

然后进入到下面的路径

vi default 你会看到nginx的默认配置

默认监听80端口 根路径

把你写好的vue项目 上传到github ,通过git clone 克隆到

服务器

路径下面

然后npm/yarn add/install 安装依赖 然后npm run build

vi 打开html 下面的 index.html 可以看到

nginx默认的html

进入sites-enabled 发现 它里面的 default 来自 sites-available的default

所以需要在 sites-available 新建一个文件 你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx -s reload

打开浏览器 公网ip:端口号  或者 域名访问

这就可以了

还有 用express 部署这个 简单些


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/7409851.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-05
下一篇2023-04-05

发表评论

登录后才能评论

评论列表(0条)

    保存