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. Spring Cloud Alibaba 官方实践指南【文章有点长自备咖啡茶点】

    注:本文内容均转自官方文档,方便胖友们学习,不代表博主观点. 链接地址:SpringCloudAlibaba | Spring Cloud Alibaba 基于网关实现 SpringCloud 服务发 ...

  2. k8s 深入篇———— pod 深入实战[七]

    前言 深入一下pod 实战. 正文 在 Kubernetes 中,有几种特殊的 Volume,它们存在的意义不是为了存放容器里的数据,也不是用来进行容器和宿主机之间的数据交换. 这些特殊 Volume ...

  3. 实训篇-Html-计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. etcd 集群安装

    1.环境准备 下载安装包:https://github.com/etcd-io/etcd/releases/ 这里下载的安装包为:etcd-v3.5.9-linux-amd64.tar.gz,即我们当 ...

  5. 高德AR驾车导航解决方案

    简介: 高德从2018年首创了车载AR导航后,已经先后在后视镜.智能车盒.前装整车厂.后装车机产品.行车记录仪等众多场景落地应用,搭建了非常完整的AR导航生态. 日前,高德地图最新发布了v10.60新 ...

  6. Spring Cloud Gateway 突发高危漏洞,下一代云原生网关恰逢其时?

    ​简介:Log4j2 的漏洞刚告一段落,Spring 官方在 2022 年 3 月 1 日发布了 Spring Cloud Gateway 的两个 CVE 漏洞:分别为 CVE-2022-22946( ...

  7. 阿里云数据库开源重磅发布:PolarDB HTAP的功能特性和关键技术

    简介:在3月2日的阿里云开源 PolarDB 企业级架构发布会上,阿里云 PolarDB 内核技术专家严华带来了主题为<PolarDB HTAP详解>的精彩演讲.在PolarDB存储计算分 ...

  8. E百科 | 第2期 扒一扒能加速互联网的QUIC协议

    简介: 众所周知,QUIC(Quick UDP Internet Connection)是谷歌制定的一种互联网传输层协议,它基于UDP传输层协议,同时兼具TCP.TLS.HTTP/2等协议的可靠性与安 ...

  9. 双11特刊|一站式在线数据管理平台DMS技术再升级,高效护航双11

    ​简介: 10万+企业共同选择的数据库服务平台 阿里云数据库已连续多年稳定支撑天猫双11,历经极端流量场景淬炼.除了保障稳定顺滑的基本盘,今年大促期间数据库通过全面云原生化,大幅提升用户体验,让技术帮 ...

  10. 2018-3-8-WPF-UncommonField-类型是什么

    title author date CreateTime categories WPF UncommonField 类型是什么 lindexi 2018-3-8 16:25:2 +0800 2018- ...