vue nginx部署 配置 解决href = ‘/login路由‘ 跳转404问题

news2024/9/23 17:21:18

示例场景

在这里插入图片描述

 <a :href=this.repDownloadUrl>下载平台</a>
 <a href="/join" target="_blank">入驻平台</a>
 <a href="/index" target="_blank" class="btn_login" style="color:#fff">

nginx部署前后端项目,当a标签跳转指定路由页面时,前端访问跳转界面报错404,或者location.href = ‘/login’ 跳转报错404

解决方法

cd 至nginx文件中的conf文件
重点:在nginx.conf配置中加入
try_files $uri $uri/ /index.html;

详情nginx配置如下


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            # 打包vue的包路径地址
            root   /file/dist;
            index  index.html index.htm;
            # 防止路由跳转的404问题
            # 解决跳转页面 href = '/路由地址' 跳转404问题
            # 也可解决location.href = '/login' 跳转404问题
            try_files $uri $uri/ /index.html;
        }

       # 接口请求转发
       location ^~ /prod-api/ {
          proxy_set_header Host $http_host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_pass http://localhost:8090/;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

配置后重启nginx,访问跳转路径无报错404

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

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

相关文章

Datawhale X 李宏毅苹果书 AI夏令营 Task 2

课程内容 &#xff08;一&#xff09;术语解释 一 . Sigmoid函数与Hard Sigmoid 函数 &#xff08;1&#xff09;Sigmoid函数 Sigmoid函数&#xff0c;也称为逻辑函数&#xff08;Logistic function&#xff09;&#xff0c;是一种在数学、生物学、信息科学、神经网络等领域广…

【原子提交:IDEA实践】

原子提交&#xff1a;IDEA实践 背景先前情况idea实际操作方式一&#xff1a;Squash Commits方式二&#xff1a;Undo Commit 后再 Commit方式三&#xff1a;Resetpush前操作后悔药——回到squash commit之前&#xff1a; 背景 临近发版&#xff0c;某位老哥的个线上MR包含多个b…

YOLOv8环境搭建、创建数据集、训练推理教程(超级详细)

yolov8和yolov10 是一个流派&#xff0c;和yolov5区别还挺大&#xff0c;所以尝试使用yolov8来进行模型训练&#xff0c;下面是详细使用流程&#xff1a; 一、环境搭建 1.1 Anaconda安装 Anaconda是一个强大的开源数据科学平台,它将很多好的工具整合在一起&#xff0c;极大地…

怎么在CSDN上赚钱?

CSDN平台上有多种方式可以赚钱&#xff0c;以下是其中几种常见的&#xff1a; 写作赚钱&#xff1a;CSDN平台鼓励用户积极创作原创技术博客&#xff0c;通过博客的阅读量和转发量来获取广告收益&#xff1b;用户还可以发表付费文章或参与付费专栏&#xff0c;在文章的阅读量和付…

Flask+LayUI开发手记(六):树型表格的增删改查

树型表格的增删改查功能与数据表格的是完全一致&#xff0c;就是调用layui-form表单组件实现数据输入再提交&#xff0c;比较大的区别是树型节点的编辑&#xff0c;都需要有上级节点的输入&#xff0c;而这个上级节点的展示&#xff0c;必须是以树型方式展示出来。当然&#xf…

【Qt应用】Qt编写简易文件管理系统

目录 引言 一、准备工作 二、设计思路 三、创建项目和基本界面 四、目录浏览功能 实现效果 五、文件操作功能 5.1 设置添加文件与删除文件按钮 5.2 添加文件槽函数 5.3 删除文件槽函数 5.4 实现效果 六、文件搜索功能 6.1 准备工作 6.2 搜索按钮槽函数 6.3 实现…

[Algorithm][综合训练][合并k个已排序的链表][dd爱旋转][小红取数]详细讲解

目录 1.合并k个已排序的链表1.题目链接2.算法原理讲解 && 代码实现 2.dd爱旋转1.题目链接2.算法原理详解 && 代码详解 3.小红取数1.题目链接2.算法原理详解 && 代码实现 1.合并k个已排序的链表 1.题目链接 合并k个已排序的链表 2.算法原理讲解 &…

网络性能优化的几个思路

指标工具 工具指标 网络性能优化 总的来说&#xff0c;先要获得网络基准测试报告&#xff0c;然后通过相关性能工具&#xff0c;定位出网络性能瓶颈。再接下来的优化工作&#xff0c;就是水到渠成的事情了。 当然&#xff0c;还是那句话&#xff0c;要优化网络性能&#xff0…

Stable Diffusion majicMIX_realistic模型的介绍及使用

一、简介 majicMIX_realistic模型是一种能够渲染出具有神秘或幻想色彩的真实场景的AI模型。这个模型的特点是在现实场景的基础上&#xff0c;通过加入一些魔法与奇幻元素来营造出极具画面效果和吸引力的图像。传统意义的现实场景虽然真实&#xff0c;但通常情况下缺乏奇幻性&a…

前后端交互的路径怎么来的?后端解决cors问题的一种方法

背景&#xff1a;后端使用node.js搭建&#xff0c;用的是express 前端请求的路径baseURL怎么来的 &#xff1f; 前后端都在同一台电脑上运行&#xff0c;后端的域名就是localhost&#xff0c;如果使用的是http协议&#xff0c;后端监听的端口号为3000&#xff0c;那么前端请求…

MySQL将数据库所有表格和列编码格式从utf8mb3换成utf8mb4

最近在做数据导入&#xff0c;发现客户数据很多都带特殊符号&#xff0c;然后数据库就会提示 “java.sql.SQLException: Incorrect string value: ‘\xF0\x9F\x8C\xB8\xEF\xBC…’ for column ‘name’ at row 1”&#xff0c;看了一下数据库对应字段字符集是 utf8mb3 的&#…

<Python><AI>基于智谱AI免费大模型GLM-4-Flash的智能聊天程序

前言 智谱AI开放了一个免费使用的大模型GLM-4-Flash&#xff0c;官方也提供了python的示例程序&#xff0c;我们结合pyqt5来编写一个基于GLM-4的简单的智能聊天工具。 界面大致如下&#xff1a; 环境配置 系统&#xff1a;windows 平台&#xff1a;visual studio code 语言&a…

Fedora koji构建系统详细教程之二 -- 构建

写在前面 本篇文章是上一篇文章的继续&#xff0c;由于koji里面的内容实在是太多&#xff0c;都塞进一篇文章里会显得很臃肿&#xff0c;于是我就拆成了两部分。在上一篇文章里&#xff0c;我们已经部署好了Fedora koji系统&#xff0c;此时kojihub已经运行、可以通过kojiweb或…

LavaDome:一款基于ShadowDOM的DOM树安全隔离与封装工具

关于LavaDome LavaDome是一款针对HTML代码安全和Web安全的强大工具&#xff0c;该工具基于ShadowDOM实现其功能&#xff0c;可以帮助广大研究人员实现安全的DOM节点/树隔离和封装。 在当今的Web标准下&#xff0c;尚无既定方法可以安全地选择性地隔离DOM子树。换句话说&#x…

这是不一样的svg图像优化哦。-可优化也可转换为组件

田间的风吹老了岁月&#xff0c;老舍笔下的茶馆写的是近代史&#xff0c;真的写尽了当时的苦态&#xff0c;可能现在的地铁写的是现代史吧。时光飞逝&#xff0c;很快就工作两三年了。昨天做项目的时候&#xff0c;引入svg图像转换为组件的时候&#xff0c;觉得很麻烦&#xff…

2.2 语言处理程序基础

以编译方式翻译C/C源程序的过程中&#xff0c;类型检查在&#xff08; &#xff09;阶段处理。 A. 词法分析 B. 语义分析 C. 语法分析 D. 目标代码生成 正确答案是 B。 解析 本题考查的是编译器工作过程。 A选项词法分析阶段处理的错误&#xff1a;非法字符、单词拼写错误等。与…

《王者荣耀》游戏玩法与部分机制分析

目录 游戏机制 MOBA核心玩法 匹配机制 游戏模式 隐藏分机制 游戏规则 总结 王者荣耀的ELO匹配机制是如何具体工作的&#xff1f; 王者荣耀中隐藏分机制的详细规则是什么&#xff1f;&#xff08;难绷&#xff01;&#xff09; 王者荣耀边境突围和五军对决模式的具体玩…

解释:有序树是什么意思?

目录 有序树的特性&#xff1a; 例子&#xff1a; 总结 &#x1f31f; 嗨&#xff0c;我是命运之光&#xff01; &#x1f30d; 2024&#xff0c;每日百字&#xff0c;记录时光&#xff0c;感谢有你一路同行。 &#x1f680; 携手启航&#xff0c;探索未知&#xff0c;激发…

STM32基于HAL库使用串口+DMA 不定长接收数据 学习记录

我这些博客都只是记录一下自己学习的内容&#xff0c;以及记录一些思考过的问题和疑惑的东西 这里的代码借鉴了一位博主的博客 地址&#xff1a;[] 这里cubemx串口基础配置部分参考这一篇博客 &#xff08;只配置了串口中断接收和printf重定向&#xff09; 这一篇博客我们需要开…

C++编程:理解左值(lvalue)和右值(rvalue)

C 值的分类(Value Categories) 目录 1 概述 2 主要分类 1.1 左值(lvalue) 1.1.1 左值详情 1.1.2 左值属性 1.2 纯右值(prvalue) 1.2.1 纯右值详情 1.2.2 纯右值属性 1.3 将逝值(xvalue) 1.3.1 将逝值详情 1.3.2 将逝值属性 3 混合分类 3.1 泛型左值…