nginx代理vue

最新推荐文章于 2024-05-08 17:33:10 发布
最新推荐文章于 2024-05-08 17:33:10 发布
阅读量5.2k 收藏 9
点赞数 2
分类专栏： 配置 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38879321/article/details/123628300
版权

一、nginx代理vue的意义

vue打包后,因为开发环境设置代理 proxy 的原因, 使得访问打包页面 dist/index.html 请求数据出现跨域。
nginx代理vue的意义在于把开发环境中的代理 proxy: {'/api': ... 的/api, 换成生产环境中的地址。

二、下载nginx

nginx官网下载并解压，推荐使用稳定版本（nginx/Windows-1.18.0）
在这里插入图片描述

三、vue打包

 npm run build // 打包文件

(默认)生成文件夹 dist

四、放入nginx中

把生成的 dist下所有

最低0.47元/天 解锁文章
weixin_38879321
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue项目部署Nginx配置文件 SSL
08-11
Nginx 是一款高性能的 HTTP 和反向代理服务器，常被用来部署 web 应用，包括 Vue 项目。SSL（Secure Sockets Layer）和其继任者 TLS（Transport Layer Security）则是用于在互联网上提供安全通信的标准，通过 HTTPS ...
web服务器nginx+部署前端vue项目
03-22
Nginx 是高性能的 HTTP 和反向代理的web服务器，处理高并发能力是十分强大的，能经受高负 载的考验,有报告表明能支持高达 50,000 个并发连接数。 其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同...
vue项目部署在nginx，vue开发环境代理websocket请求，线上nginx代理websocket请求。
weixin_43790802的博客
10-12 4610
vue项目部署在nginx，vue开发环境代理websocket请求，线上nginx代理websocket请求。
关于vue配置代理（nginx）的一些学习记录
weixin_45392204的博客
08-31 4086
假设有两台主机AB，一台服务器，其中A主机代理(代替)B主机去访问服务器。
vue3 项目部署，Nginx配置https,重定向，详细流程_vue3 前端项目ngnix配置(1)
最新发布
2401_84618023的博客
05-08 715
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】httpgzip on;//gzip 压缩开启server{listen 80;//监听默认80端口//你的网址。
Nginx如何代理一个Vue项目
青春沐谷的博客
03-27 6780
如何用Nginx代理一个Vue项目
nginx - 使用nginx部署vue项目到本地以及代理和负载均衡
qq_43886365的博客
09-29 8966
使用nginx部署vue项目到本地以及代理和负载均衡
nginx配置vue前端代理
m0_55333789的博客
09-14 2514
nginx配置vue前端代理
nginx 配置vue代理2种方式
xiaogg3678的专栏
03-02 7497
**方法一** 访问方式：http://域名 server { listen 8088; #端口号，自定义 server_name 域名; root 路径; index index.html; # Load configuration files for the default serve...
vue单页面应用nginx代理
phoenix_main的web之路的历程
06-16 230
【代码】vue单页面应用nginx代理config。
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index....
vue proxy代理 + nginx 处理跨域
01-03
前言： 身为一名前端菜鸟，之前一直未关注后端对于跨域的配置，这不，终于又踩到坑了，由于nginx未配置代理转发，所以前端的处理一直都是针对开发环境和生产环境做处理 // 错误 的代理配置，同样启用proxy代理，并在axios配置文件中根据开发环境配置请求，这样在开发环境中可以正常请求，但是在生产环境中由于直接请求，浏览器会进行预请求OPTIONS http预请求options,这是浏览器对复杂跨域请求的一种处理方式,在真正发送请求之前,会先进行一次预请求,就是我们刚刚说到的参数为OPTIONS的第一次请求,他的作用是用于试探性的服务器响应是否正确,即是否能接受真正的请求,如果在options
在nginx上部署vue项目(history模式)的方法
08-28
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下
nginx部署vue项目
热门推荐
PhilsphyPrgram的博客
07-14 1万+
windows的nginx部署vue项目
使用nginx部署vue项目及常见问题
ywp2021的博客
03-07 2566
1.5 还有一个是 conf 文件夹里面是放配置文件的，主要是用 nginx.conf ,里面找到 serve 这个对象，listen 80 这个是设置端口号，里面还有一个。http://192.168.1.91:8080/这个就是后端的接口， 作用是在nginx 下设置代理。解决方法：使用nginx服务器运行，并在nginx服务器的配置文件中，进行代码配置。查看关闭log：taskkill /f /t /im nginx.exe。解决方法：将dist文件夹的内容，放到nginx服务器运行即可。
Centos7上使用Nginx部署Django Vue 前后端分离项目
qq_43766034的博客
03-23 6876
Centos7上使用Nginx部署Django Vue 前后端分离项目 前言 之前使用Django和Vue开发了一个前后端分离的项目，本次将项目部署到全新的腾讯云上，所以有一些服务器的环境配置本文也会有所涉及。 1、准备工作 全新Centos7.6 Django项目 Vue项目 2、基础配置 (1)、新建一个普通用户 连上新服务器后默认是root用户，我们可以新建一个普通用户 adduser xwj #新建用户 passwd xwj #设置用户密码 (2)、赋予用户权限 编辑 sudoe
Nginx外网访问内网如何实现
macx_1371873xxxx的博客
07-17 4230
外网浏览器与内网是不通的，但是外网与中间过渡服务器是通的，中间过渡服务器与内网服务器是通的，这样在外网访问过渡服务器时，过渡服务器再跳转到后台服务器，相当于外网浏览器给内网后台服务器发送的请求，这样肯定是不通的，所以当外网浏览器访问中间过渡服务器时，中间过渡服务器做了一个代理，然后跳转到内网服务器，相当于中间过渡服务器发送的请求，这样就可以实现外网访问内网的功能了！项目要求：将甲方内网的项目能够对外访问，甲方提供一个中间过渡服务器，中间过渡服务器，外网客户可以访问，且中间服务器可以访问内网；
nginx 代理vue
09-29
nginx代理vue的作用是将开发环境中的代理请求转发给生产环境中的地址。具体实现方法是在nginx配置文件中，通过location指令将请求路径映射到相应的代理地址上。例如，在配置文件中设置location /api来匹配开发环境中的代理路径/api，并使用proxy_pass指令将请求转发给生产环境中的地址http://192.168.xx.xxx:8083。 下面是配置nginx代理vue的步骤： 1. 打开nginx的配置文件nginx.conf，一般位于conf文件夹中。 2. 在server块中添加location指令，用于匹配代理路径。 3. 在location指令中使用proxy_pass指令，将请求转发给目标地址。 4. 保存配置文件。 5. 重启nginx服务，使配置生效。 请注意，配置文件中的listen指令用于设置监听的端口，server_name指令用于设置服务器的域名或IP地址。根据实际需求，可以根据需要进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值