vue-cli3 项目路由 history 模式部署到 nginx 服务器
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 服务器的更多相关文章
- VUE路由history模式坑记--NGINX
因微信分享和自动登录需要,对于URL中存在'#'的地址,处理起来比较坑(需要手动写一些代码来处理).还有可能会有一些隐藏的问题没被发现. 如果VUE能像其他(JSP/PHP)系统的路径一样,就不存在这 ...
- K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...
- Vue路由history模式踩坑记录:nginx配置解决404问题
问题背景: vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使 ...
- 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
- vue react 路由history模式刷新404问题解决方案
vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...
- vue路由history模式刷新页面出现404问题
vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...
- vue路由history模式下打包node服务器配置
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- vue项目的mode:history模式
最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...
- vue cli3 项目配置
[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...
- vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目
使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这 ...
随机推荐
- "鸿蒙生态专家面对面"三月专场等你前来!
- centos7搭建vsftpd环境详解[亲测成功]
centos7搭建vsftpd环境详解(亲测) 标签: centos7vsftpd 分类: linux相关(关于centos)(2) 版权声明:本文为博主原创文章,未经博主允许不得转载. 初学L ...
- 实时数仓构建:Flink+OLAP查询的一些实践与思考
今天是一篇架构分享内容. 1.概述 以Flink为主的计算引擎配合OLAP查询分析引擎组合进而构建实时数仓,其技术方案的选择是我们在技术选型过程中最常见的问题之一.也是很多公司和业务支持过程中会实实在 ...
- 试题B:小球反弹(第十五届蓝桥杯省赛B组c/c++组)
试题B:小球反弹 我在刷博客的时候看见有人分享了蓝桥杯的题目,我想起了我之前大学打蓝桥杯刷题的时光,还是很怀念当时打比赛的氛围,关于这个小球反弹的题目,我感觉很有意思,我一开始也是走了好多弯路,然后去 ...
- python01-03作业
# 小球落地,一共运动了多少米 hight = 100 # 原始高度 distance = 0 # 和 for i in range(10): # 将 下落 高度加入到 和 中 distance += ...
- Solution Set - 数学相关
CF645F Link&Submission. 利用 \(\sum\limits_{d|n}\varphi(\frac{n}{d})=n\),只要对每个数 \(x\),求出 \(cnt_x\) ...
- Redis官方开源的可视化管理工具 - RedisInsight
前言 今天大姚给大家推荐一款Redis官方开源的可视化管理工具:RedisInsight. Redis介绍 Redis (Remote Dictionary Server) 是一个使用 C 语言编写的 ...
- Ruby on Rails Active Record数据库常用操作
目录 创建 批量插入 判断是否存在 Ruby on Rails 日期查询方法 文档地址: https://freed.gitee.io/rails-guides/active_record_query ...
- ansible系列(34)--ansible实战之部署WEB集群架构(4)
目录 1. 业务环境部署 1.1 wordpress-base编写 1.2 wordpress-web编写 1.3 wordpress-mysql编写 1.4 wordpress-proxy编写 1. ...
- ansible(6)--ansible的copy和fetch模块
1. copy模块 功能:从 ansible 服务端主控端复制文件到远程主机: copy模块的主要参数如下: 参数 说明 src 复制的源文件路径,若源文件为目录,默认进行递归复制,如果路劲以&quo ...