window中借助nginx配置vite+vue项目的反向代理步骤

在官网下载好nginx的安装包后,解压后

在这里插入图片描述

CMD打开

start nginx 是启动命令
nginx -s stop 停止服务
nginx -s reload 如果重写了nginx.conf文件,要执行这条命令

正常情况下

成功启动和成功停止服务长这样
在这里插入图片描述

错误情况&解决

  • 如果nginx -s stop失败

nginx: [error] CreateFile() “V:\Web\16 nginx\nginx/logs/nginx.pid” failed (2: The system cannot find the file specified)

借助命令

查看与nginx相关的端口
tasklist /fi "imagename eq nginx.exe"停止nginx进程
taskkill /f /t /im "nginx.exe"

在这里插入图片描述

在conf文件中看它的默认端口

比如我这里就不是80端口,而是5000端口。

在这里插入图片描述

在浏览器地址栏中输入 http://localhost:5000
正常情况下是nginx默认的页面(我这里是已经部署在上面了)
在这里插入图片描述

vue项目部署

在vs code中 pnpm install build

在这里插入图片描述

文件目录中会出现dist文件夹,把dist文件夹下的所有文件【替代】nginx html目录下的所有文件

在这里插入图片描述

因为vue项目中,我使用了vite进行反向代理,但是在实际项目上线后是没有用的,所以要借助nginx。

vite反向代理的逻辑

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// import basicSsl from '@vitejs/plugin-basic-ssl'export default defineConfig({server:{// host: '0.0.0.0',// https: true,proxy: {'/binance':{target: 'https://api.binance.com',changeOrigin: true,// secure: true,  // 确保代理使用 HTTPS 请求// protocolRewrite: 'https',rewrite: (path) => path.replace(/^\/binance/, '')},'/rootdata':{target: 'https://api.rootdata.com/open/ser_inv',changeOrigin: true,rewrite: (path)=>path.replace(/^\/rootdata/, ''),secure: true  // 确保代理使用 HTTPS 请求},'/gecko':{target: 'https://api.coingecko.com/api/v3/simple/price',changeOrigin: true,// secure: false,  // 确保代理使用 HTTPS 请求// protocolRewrite: 'https',rewrite: (path) => path.replace(/^\/gecko/, '')},'/atguigu': {target: 'http://sph-api.atguigu.cn',changeOrigin: true,// secure: false,  // 确保代理使用 HTTPS 请求// protocolRewrite: 'https',rewrite: (path) => path.replace(/^\/atguigu/, '')}}},plugins: [vue(),// basicSsl()],resolve: {alias: {"@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src}}
})

vue文件

import axios from 'axios';
async function getBTCPrice() {try {const response = await axios.get('/binance/api/v3/ticker/price', {params: { symbol: 'BTCUSDT' }});console.log('当前 BTC 价格:', response);} catch (error) {console.error('获取价格时出错:', error);}
}const test = ()=> {getBTCPrice()
}

nginx.conf

这个文件中配置反向代理

源文件删除所有的注释其实就几行:

worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       5000;server_name  localhost;location / {root   html;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /other/ {root   html;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /template {rewrite  ^.+template/?(.*)$ /$1 break;proxy_pass  http://192.168.245.203:10001;proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}}

以 /atguigu 这个路径为例

① nginx.conf中添加下图这句话,注意路径加斜杠表示/atguigu这个路径最后没有(https://blog.csdn.net/yavlgloss/article/details/139503686)。②在CMD中 nginx -s reload。③在页面中发现网络请求成功
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/59888.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

移动取证和 Android 安全

当今的数字时代已经产生了许多技术进步,无论是智能手机还是虚拟现实、人工智能和物联网 (IoT) 等下一代基础技术。 智能手机已不再只是奢侈品,而是我们生存所必需的东西。根据各种统计数据,如今全球有超过 50% 的人使用手机。 由于数据存储…

图神经网络(GNN)入门笔记(1)——图信号处理与图傅里叶变换

一、信号处理:时域与频域 时域(Time Domain)是我们生活中常见的信号表示方式,以横轴为时间,纵轴为信号该时刻的强度(幅度),就可以得到一张时域图。打个比方,通过每时每刻…

Cent OS-7的Apache服务配置

WWW是什么? WWW(World Wide Web,万维网)是一个全球性的信息空间,其中的文档和其他资源通过URL标识,并通过HTTP或其他协议访问。万维网是互联网的一个重要组成部分,但它并不是互联网的全部。互联…

开放式耳机如何选择?五款千万不能错过的开放式耳机机型推荐

在这里我先做一个行业的知识科普,目前市场上有超过80%的品牌,都是非专业的开放式耳机品牌,也就是跨界大牌或者网红品牌,这些品牌由于没有开放式声学的技术沉淀,在制作开放式耳机的时候,通常都是直接套用传统…

补一下 二维 平面直角坐标系 到三维

上一篇帖子写到 二维的平面直角坐标系,是那样的,这次补充一下三维的。首先需要,安装一个包,如下: 然后,把参数输入,输入这个坐标系的参数,如下: 这样就可以输出如下的三…

bat调用Perl脚本接收不到参数

perl -d checkLog.pl --logfileE:\temp4\test.log --batch-name"Test-log"这样写在BAT文件里肯定能接收到参数 checkLog.pl --logfileE:\temp4\test.log --batch-name"Test-log" 但当这样写时,就不一定能接受到参数了! 现象:在Win11系统上还好,只需要在*.…

【机器学习】决定系数(R²:Coefficient of Determination)

决定系数,也称为 R 平方,是一种用于衡量回归模型预测效果的统计指标。它表示了模型解释目标变量总变异的程度,数值介于 0 和 1 之间,数值越接近 1 表明模型的解释力越强。 1. 的定义和公式 的公式如下: 其中&#xf…

推荐JDK1.8 API 中文文档

jdk api 1.8_google.CHM 一,CHM文件下载 最近更新 链接: 百度网盘 请输入提取码 提取码: e4rx 备用 链接: 百度网盘 请输入提取码 提取码: gczr 二,在线下载地址 https://www.oracle.com/java/technologies/javase-jdk8-doc-downloads.html 三&…

AscendC从入门到精通系列(一)初步感知AscendC

1 什么是AscendC Ascend C是CANN针对算子开发场景推出的编程语言,原生支持C和C标准规范,兼具开发效率和运行性能。基于Ascend C编写的算子程序,通过编译器编译和运行时调度,运行在昇腾AI处理器上。使用Ascend C,开发者…

静态库、动态库、framework、xcframework、use_frameworks!的作用、关联核心SDK工程和测试(主)工程、设备CPU架构

1.1库的概念 库:程序代码的集合,编译好的二进制文件加上头文件供使用,共享程序代码的一种方式。 1.2库的分类 根据开源情况分为:开源库(能看到具体实现)、闭源库(只公开调用的的接口&#xf…

天地图入门|标注|移动飞行|缩放,商用地图替换

“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。集成了来自国家、省、市(县)各级测绘地理信息部门,以及相关政府部门、企事业单位 、社会团体、公众的地理信息公共服务资源,如果做的项目是政府部门、企事业单位尽量选…

Webserver(5.3)线程池实现

目录 线程池locker.hthreadpool.h 线程池 相比于动态地创建子线程,选择一个已经存在的子线程的代价显然要小得多。至于主线程选择哪个子线程来为新任务服务,有多种方式: 主线程使用某种算法来主动选择子线程。最简单、最常用的算法是随机算…

【重装系统后重新配置2】pycharm 终端无法激活conda环境

pycharm 终端无法激活 conda 环境,但是 Windows本地终端是可以激活的 原因是pycharm 默认的终端是 Windows PowerShell 解决方法有两个: 一、在设置里,修改为cmd 二、下面直接选择

云轴科技ZStack助力新远科技开启化工行业智能制造新篇章

新远科技基于云轴科技ZStack Cube超融合和ZStack Zaku容器云平台打造了灵活高效的IT基础设施,实现了IaaS和PaaS层的全面覆盖,优化了资源利用率,降低了硬件成本和运维复杂性,同时强化了数据安全和业务连续性。 化工行业的数字化先…

test 是 JavaScript 中正则表达式对象 (RegExp) 的一种方法,用于测试一个字符串是否匹配某个正则表达式

在你的代码中,test 方法用于验证扫描结果是否符合特定的格式要求。具体来说,/^[A-Za-z\d]{16}$/.test(res.result) 这一行代码用于检查扫描结果 res.result 是否是一个由16个字母或数字组成的字符串。 test 方法的作用 正则表达式匹配: ^ 表…

Golang | Leetcode Golang题解之第546题移除盒子

题目: 题解: func removeBoxes(boxes []int) int {dp : [100][100][100]int{}var calculatePoints func(boxes []int, l, r, k int) intcalculatePoints func(boxes []int, l, r, k int) int {if l > r {return 0}if dp[l][r][k] 0 {r1, k1 : r, k…

数字时代企业的基本数据丢失预防策略

在当今的数字时代,数据丢失预防对企业的重要性怎么强调也不为过。了解与数据丢失相关的风险至关重要,因为人为错误和网络攻击等常见原因可能会产生严重后果。 实施有效的数据丢失预防策略(例如安全协议、定期数据备份和员工培训)…

使用Element UI实现一个拖拽图片上传,并可以Ctrl + V获取图片实现文件上传

要在 Element UI 的拖拽上传组件中实现 Ctrl V 图片上传功能,可以通过监听键盘事件来捕获粘贴操作,并将粘贴的图片数据上传到服务器。 版本V1,实现获取粘贴板中的文件 注意,本案例需要再你已经安装了Element UI并在项目中正确配…

uni-app小程序echarts中tooltip被遮盖

图表中的文案过长,tooltip溢出容器,会被遮盖住 解决方案: 在echarts的tooltip中有confine属性可将tooltip限制在容器内,不超过容器,就不易被遮盖

设计模式-七个基本原则之一-开闭原则 + SpringBoot案例

开闭原则:(SRP) 面向对象七个基本原则之一 对扩展开放:软件实体(类、模块、函数等)应该能够通过增加新功能来进行扩展。对修改关闭:一旦软件实体被开发完成,就不应该修改它的源代码。 要看实际场景,比如组内…