1.项目修改
vue.config.js增加

 publicPath: '/'

2.nginx配置

location / {#访问前端页面
root /data/dist;#vue项目存放路径
index index.html; #hash模式只配置访问html就可以了
try_files $uri $uri/ /index.html;#history模式配置否则会出现vue的路由在nginx中刷新出现404
}

vue-cli3 项目路由 history 模式部署到 nginx 服务器的更多相关文章

  1. VUE路由history模式坑记--NGINX

    因微信分享和自动登录需要,对于URL中存在'#'的地址,处理起来比较坑(需要手动写一些代码来处理).还有可能会有一些隐藏的问题没被发现. 如果VUE能像其他(JSP/PHP)系统的路径一样,就不存在这 ...

  2. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  3. Vue路由history模式踩坑记录:nginx配置解决404问题

    问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...

  4. 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题

    摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...

  5. vue react 路由history模式刷新404问题解决方案

    vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...

  6. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

  7. vue路由history模式下打包node服务器配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  8. vue项目的mode:history模式

    最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...

  9. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  10. vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目

    使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这 ...

随机推荐

  1. xxx,一个神奇的 Python 库

    前几天,我在<技术周刊的转变:如何平衡热爱与现实?>一文里写过国内 Python 自媒体圈在近几年的两个现象(仅个人观感,无科学数据支撑): Python 广告投放出现断崖式萎缩 Pyth ...

  2. React 逃离闭包陷阱

    众所周知,JavaScript 中的闭包(Closures)一定是这种语言最可怕的特性之一,即使是无所不知的 ChatGPT 也是这样说的.另外它可能也是最隐蔽的语言特性之一,我们在编写 React  ...

  3. Kubernetes 部署集群1.28.2版本(无坑)

    初步搭建一个一个主节点和两个从节点Kubernetes 1.28.2 集群.先准备好机器 | host | hostname | os | role | hardware | | --- | --- ...

  4. 【笔记】Java相关大杂烩②

    [笔记]Java相关大杂烩② if单分支情况下,如果没有加 {},那么默认只包含第一条语句. if 和 else 分支后面如果包含多条语句,那么需要使用 {} 括起来. 不能随意地使用数学上的表达方式 ...

  5. 力扣142(Java)-环形链表Ⅱ(中等)

    题目: 给定一个链表的头节点  head ,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环. 为了表示 ...

  6. 力扣122(java&python)-买卖股票的最佳时机 II(中等)

    题目: 给你一个整数数组 prices ,其中 prices[i] 表示某支股票第 i 天的价格. 在每一天,你可以决定是否购买和/或出售股票.你在任何时候 最多 只能持有 一股 股票.你也可以先购买 ...

  7. 转载 | 基于阿里云Serverless函数计算开发的疫情数据统计推送机器人

    简介: 本文选自函数计算征集令优秀征文! 一.Serverless函数计算 什么是Serverless? 在<Serverless Architectures>中对 Serverless ...

  8. 阿里云 EMR Delta Lake 在流利说数据接入中的架构和实践

    简介: 为了消灭数据孤岛,企业往往会把各个组织的数据都接入到数据湖以提供统一的查询或分析.本文将介绍流利说当前数据接入的整个过程,期间遇到的挑战,以及delta在数据接入中产生的价值. 背景 流利说目 ...

  9. 实时计算pv/uv Demo

    简介: 本文由阿里巴巴高级技术专家邓小勇(静行)分享,主要用 Demo 演示如何通过实时计算 Flink 实时计算pv/uv的场景. 本文由阿里巴巴高级技术专家邓小勇(静行)分享,主要用 Demo 演 ...

  10. [FAQ] Smart Contract: xxx has not been deployed to detected network (network/artifact mismatch)

    在前端用 web3 与 contract 交互时,需要获取到已部署的 contract 实例进行操作,如果没有获取到就会报此错. 比如如下的 .deployed() 阶段: /* 伪代码 */ con ...