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. CentOS-6.5快速搭建HTTP服务器和仅供授权用户登陆的FTP服务器

    CentOS-6.5快速搭建HTTP服务器和仅供授权用户登陆的FTP服务器 (2014-01-09 21:29:31) 转载▼ 标签: linux centos 服务器 http vsftp 分类:& ...

  2. 重新整理.net core 计1400篇[九] (.net core 中的依赖注入的服务注入)

    前言 在该系列六中介绍了一个简单的依赖注入,该节介绍.net core 中的依赖注入的服务注入. ServiceDescriptor ServiceDescriptor 是服务描述的意思,这个是做什么 ...

  3. webpack 打包jquery

    前言 记一次配置webpack jqeury中的案例. 正文 选取自己需要安装的jquery版本号 dependencies:{ //此处的jquery版本根据npm后的版本来看,会有安装版本的提示 ...

  4. .netcore 使用Quartz定时任务

    这是一个使用 .NET Core 和 Quartz.NET 实现定时任务的完整示例.首先确保已经安装了 .NET Core SDK.接下来按照以下步骤创建一个新的控制台应用程序并设置定时任务: 创建一 ...

  5. 浏览器端实现类似input限制输入两位小数,输入时光标从输入位置移动到最后

    1.问题描述展示 示例代码所做限制为不允许输入字母d,其他限制规则可以根据需求自己调整,使用React编写,其他框架或原生均可根据该代码理解原理进行转变,特意使用了中文键盘可以看到输入框下面白色框闪出 ...

  6. 力扣442(java)-数组中重复的数据(中等)

    题目: 给你一个长度为 n 的整数数组 nums ,其中 nums 的所有整数都在范围 [1, n] 内,且每个整数出现 一次 或 两次 .请你找出所有出现 两次 的整数,并以数组形式返回. 你必须设 ...

  7. TSDB时序数据库时序数据压缩解压技术浅析

    ​简介: 目前,物联网.工业互联网.车联网等智能互联技术在各个行业场景下快速普及应用,导致联网传感器.智能设备数量急剧增加,随之而来的海量时序监控数据存储.处理问题,也为时序数据库高效压缩.存储数据能 ...

  8. [Mobi] frida Hook 略知一二: frida-CLI, frida-server

    Frida 是一款基于 python + javascript 的 hook 框架,主流平台都支持,由于是基于脚本的交互,因此相比 xposed 和 substrace cydia 更加便捷. 使用时 ...

  9. 21.3K star!推荐一款可视化自动化测试/爬虫/数据采集神器!功能免费且强大!

    大家好,我是狂师! 在大数据时代,信息的获取与分析变得尤为重要.对于开发者.数据分析师乃至非技术人员来说,能够高效地采集网络数据并进行分析是一个强有力的工具.今天,我要向大家推荐的是一款功能强大.操作 ...

  10. dotnet SemanticKernel 入门 调用原生本机技能

    本文将告诉大家如何在 SemanticKernel 里面调用原生本机技能,所谓原生本机技能就是使用 C# 代码编写的原生本地逻辑技能,这里的技能可讲的可不是游戏角色里面的技能哈,指的是实现某个功能的技 ...