Nginx部署VUE3项目

news2024/11/24 20:10:34
  1. build 打包生成 dist 上传至服务器
  2. 版本:nginx1.24,dist放置根目录下html下
    在这里插入图片描述
location / {
			#项目打包生成的静态文件所在路径 配置要打开的资源的根目录的地址,是以 nginx 下的 html 文件夹中dist为根目录来查找的
			root  html/dist;

			#默认主页
			index  index.html index.htm;

			#Nginx部署Vue项目刷新404问题
			#try_files $uri $uri/ /index.html;
        }

闭坑注意: root 参数:html/dist 不要在html前面加“/” ,此处配置不对 访问会显示404错误

  1. vue3本地开发中解决跨域 会配置代理,但是build后的包是包含代理配置文件的,所以此处要通过nginx的反向代理 重新配置
#配置反向代理,解决跨域问题 
        #当路径匹配到/api时,将用http://localhost:3000来代替
        location /api {
			proxy_set_header   Host             $proxy_host;
			proxy_set_header   X-Real-IP        $remote_addr;
			proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
			proxy_set_header   Connection "keep-alive";
			#要代理的后端接口地址
            proxy_pass http://ip:8088/xx/xx/xx;
        }

闭坑注意:
本地开发环境中配置的 代理地址:http://ip:8088/xx/xx/xx/ 原值赋值后会导致报错
应配置为:http://ip:8088/xx/xx/xx,自后没有“/”扛
7.

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

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

相关文章

前端学习<二>CSS基础——06-CSS盒模型详解

盒子模型 前言 盒子模型,英文即box model。无论是div、span、还是a都是盒子。 但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。…

【C语言】strcmp 的使⽤和模拟实现

前言 这篇文章将要带我们去实现模拟一个strcmp函数 首先我们要知道strcmp函数的定义 strcmp()定义和用法 我们先看一下strcmp在cplusplus网站中的定义 链接: link int strcmp ( const char * str1, const char * str2 );比较两个字符串将 C 字符串 str1 与 C 字符串 str2 …

There is no getter for property named ‘deleted‘

实体类在继承BaseEntity的时候,由于没填写deleted参数名导致mybatis报错 这时候要么改application.yml里的mybatis参数👇 要么就将BaseEntity基类的delete上加个existfalse👇(推荐)

工业互联网下的增强现实

工业互联网下的增强现实 1、 概述 增强现实(Augmented Reality,简称AR),增强现实技术也被称为扩增现实,AR增强现实技术是促使真实世界信息和虚拟世界信息内容之间综合在一起的较新的技术内容,其将原本在现…

C语言牛客网BC-37 牛牛的圆(求面积)

题目如下 代码实现 #include<stdio.h> int main() { float r 0;float s 0;scanf("%f",&r);s 3.14*r*r;printf("%.2f",s);return 0; } 创作不易&#xff0c;点点关注&#xff0c;感谢支持&#xff01;&#xff01;&#xff01;

深入解析MD5哈希算法:原理、应用与安全性

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 本文将深入探讨MD5哈希算法的工作原理、应用场景以及安全性问题。我们将了解MD5如何生成固定长度的哈希值&#xff0c;以及它在数…

前端Webpack5高级进阶课程

课程介绍 本套视频教程主要内容包含React/Vue最新版本脚手架分析、基于Webpack5编写自己的loader和plugin等&#xff0c;让你开发时选择更多样&#xff0c;最后&#xff0c;用不到一百行的代码实现Webpack打包。通过本套视频教程的学习&#xff0c;可以帮你彻底打通Webpack的任…

蚂蚁集团Java一面,不只是技术问题,还有系统设计的深度拷问!

下面我将分享一位同学在蚂蚁集团Java一面的面试经历&#xff0c;他的评价是&#xff0c;面试过程中问题很深入&#xff0c;你试试呢&#xff1f; 【提醒】通过这次面试经验&#xff0c;你将可以复习到以下知识点&#xff1a; 线程池的工作原理、参数配置及使用注意事项CPU密集…

java特殊文件——properties属性文件概述

前言&#xff1a; 整理下学习笔记&#xff0c;打好基础&#xff0c;daydayup!! properties properties是一个Map集合&#xff08;键值对合集&#xff09;&#xff0c;但是一般不当作合集。而是用来代表属性文件&#xff0c;通过Properties读写属性文件里的内容 Properties调用方…

【计算机考研】408到底有多难?

你真以为大家是学不会408吗&#xff1f; 不是&#xff01;单纯是因为时间不够&#xff01;&#xff01;&#xff01; 再准确一些就是不会分配时间 408的知识其实并不难&#xff0c;要说想上130那确实有难度&#xff0c;但是100在时间充裕的情况下还是可以做到的 我本人是双…

深入浅出:探索Hadoop生态系统的核心组件与技术架构

目录 前言 HDFS Yarn Hive HBase Spark及Spark Streaming 书本与课程推荐 关于作者&#xff1a; 推荐理由&#xff1a; 作者直播推荐&#xff1a; 前言 进入大数据阶段就意味着 进入NoSQL阶段&#xff0c;更多的是面向OLAP场景&#xff0c;即数据仓库、BI应用等。 …

阅读笔记(MM2023)Learning pixel-wise alignment for unsupervised image stitching

无监督图像拼接中的学习逐像素对齐 Jia, Q., Feng, X., Liu, Y., Fan, X., & Latecki, L. J. (2023, October). Learning pixel-wise alignment for unsupervised image stitching. In Proceedings of the 31st ACM International Conference on Multimedia (pp. 1392-140…

Chrome之解决:浏览器插件不能使用问题(十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

自己编译SQLite或将SQLite移植到新的操作系统(六)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite中的动态内存分配&#xff08;五&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 1.0 引言 对于大多数应用程序&#xff0c;推荐的构建方法 SQLite是使用合并代码 文件 sqlite3.c 及其相应的头文件 sqlite3.…

配置文件 application properties

配置文件 application properties 1 参数交由配置文件集中管理 Value(“${}”)用于外部配置的属性注入 在之前编写的程序中进行文件上传时&#xff0c;需要调用AliOSSUtils工具类&#xff0c;将文件上传到阿里云OSS对象存储服务当中。而在调用工具类进行文件上传时&#xff0c…

深度学习中的优化问题

深度学习中的优化问题 简要指南 我在 2019 年底左右开始撰写有关数学和机器学习的文章&#xff1b;从那时起&#xff0c;我写了数百篇教育文章&#xff0c;揭示了我们日常使用的算法背后的细节。 让写文章的人 感到尴尬的一个方法是&#xff1a;让他们阅读他们早期的作品。我…

JSON 文档存储详解

JSON&#xff08;JavaScript Object Notation、JavaScript 对象表示法&#xff09;是一种轻量级的数据交换格式&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据。JSON 易于阅读和编写&#xff0c;同时也方便机器解析和生成&#xff0c;并且能够有效地提升网络传…

Qt中QIcon图标设置(标题、菜单栏、工具栏、状态栏图标)

1 exe程序图标概述 在 Windows 操作系统中&#xff0c;程序图标一般会涉及三个地方&#xff1b; &#xff08;1&#xff09; 可执行程序&#xff08;以及对应的快捷方式&#xff09;的图标 &#xff08;2&#xff09; 程序界面标题栏图标 &#xff08;3&#xff09;程序在任务…

element-ui的el-switch在修改值之前做二次确认操作

如果你直接就在<el-switchv-model"row.balanceCheck"active-color"#13ce66"inactive-color"#EAECF0"change"switchChange($event, row)"></el-switch>switchChange (e, row) {this.$confirm(是否修改&#xff1f;).then((…

从傅里叶级数到离散傅里叶变换/逆变换

傅里叶级数&#xff08;Fourier Series&#xff09;和傅里叶变换&#xff08;Fourier Transform&#xff09;都是以法国数学家让-巴蒂斯特约瑟夫傅里叶的名字命名&#xff0c;用于分析函数或信号的频率成分&#xff0c;它们基于相似的数学原理&#xff0c;但是应用于不同类型的…