一、vue 在nginx下页面刷新出现404

在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是没有表达完整,可能会让比较急于解决这个问题的人简单复制却始终解决不了问题

nginx正确的配置:

1、如果是在根目录则配置如下

location / {
  root  /;
  index index.html;
  try_files $uri $uri/ /index.html
}

2.如果是有特定目录

location /xx/xx/ {
  root  /;
  index index.html;
  try_files $uri $uri/ /xx/xx/index.html
}

附上官方vue-router的说明:https://router.vuejs.org/zh-cn/essentials/history-mode.html

二、vue打包后发布在nginx下,页面加载了js但是页面显示空白

这个问题是因为在配置router的时候没有带上自己的项目的目录,在配置router那里加上项目路径就可以了

1.直接写在router上

如果直接是根目录就将/xx/xxx改成/

export default new Router({

  mode: 'history',
base: '/xx/xxx',
routes: [
{
path: '/',
name: 'Login',
component: signIn
}
]
})

2.写成全局变量在配置文件里,以便发布

export default new Router({

  mode: 'history',
base:
env.base_build_path,
  routes: [
{
path: '/',
name: 'Login',
component: signIn
}
]
})
注:这个env.base_build_path就是配置文件里的一个全局变量,也是项目路径

(只作为自己的记录,有需要的人做为参考)

vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决的更多相关文章

  1. mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉

    空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...

  2. 解决angular2页面刷新后报404错误

    如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址. ...

  3. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  4. [Swift通天遁地]二、表格表单-(4)使用系统自带的下拉刷新控件,制作表格的下拉刷新效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. vue中加载three.js的gltf模型

    vue中加载three.js的gltf模型 一.开始引入three.js相关插件.首先利用淘宝镜像,操作命令为: cnpm install three //npm install three也行 二. ...

  6. 无阻塞加载js,防止因js加载不了影响页面显示

    浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢 ...

  7. Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同

    我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...

  8. 根据打开页面加载不同Js

    根据打开页面加载不同Js //根据打开页面加载不同JS $(document).ready(function(){ var href = document.URL; /*获取当前页面的URL*/ if ...

  9. 通过sessionStorage来根据屏幕宽度变化来加载不同的html页面

    因为项目需要,分别写了移动端和PC端的两个html页面,现在需要根据不同的屏幕宽度来加载对应的页面. 先说一下本人的思路-- 刚开始我直接在加载页面的时候判断屏幕宽度,然后加载相应的页面,大家是不是也 ...

随机推荐

  1. 深入了解Redis(5)-内存回收

    了解redis内存回收之前,需要先了解过期键删除策略. 过期键删除策略 1.定时删除 在设置键的过期时间的同时,创建一个timer,在定时器在键的过期时间到达时,立即执行对键的删除操作.内存友好型策略 ...

  2. MySQL: 1、MySQL基础

    一.数据库基本概念 1.什么是数据库? 数据就是存储和管理数据库的仓库,本质上是一个文件系统,以文件的方式将数据保存再电脑上 2.为什么使用数据库? 使用数据库存储数据用户可以方便的对数据库中的数据进 ...

  3. Spring Boot 系统启动任务定义

    前言 系统任务:在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行. 应用场景:例如配置文件加载,数据库初始化等操作 Spring Boot出现之前 解 ...

  4. RabbitMq如何确保消息不丢失

    上篇写了掌握Rabbitmq几个重要概念,从一条消息说起,这篇来总结关于消息丢失让人头痛的事情.网络故障.服务器重启.硬盘损坏等都会导致消息的丢失.消息从生产到消费主要结果以下几个阶段如下图. ①生产 ...

  5. APPCNA 指纹验证登录

    今天在APP中集成了指纹与手势登录功能,本文章分两部分进行记录.一是手势功能的逻辑.二是代码实现.该APP是采用APPCAN开发,直接用其已写好的插件,调用相当接口就要可以了. 1.在APP的个人中心 ...

  6. 玩转Libmodbus(二) 写代码体验

    libmodbus在线文档 https://www.jianshu.com/p/d93c17485c0a 原创篇 参考上一篇转载的博客,我的ubuntu上的最终生成的动态库的路径,下图所示 我的lin ...

  7. 联赛模拟测试12 B. trade

    题目描述 分析 \(n^2\) 的 \(dp\) 应该比较好想 设 \(f[i][j]\) 为当前在第 \(i\) 天剩余的货物数量为 \(j\) 时的最大收益 那么它可以由 \(f[i-1][j]\ ...

  8. 第十四周C++学习总结

    类模板使用方法:类模板名 <数据类型> 对象名: C++有个标准模板库(STL)(standard template library),编程时使用它会提高程序的可靠性. Stl 包含了(容 ...

  9. 【转】Linux-CentOS7设置程序开启自启步骤!

    链接:https://blog.csdn.net/wang123459/article/details/79063703

  10. java流程控制之习题

     经过近段时间的学习,差不多也掌握了java的流程控制以及基本知识,下面就来一起练练习题吧,看能做出来几道. 第一道题:假设小明有100块钱,这时候小明去超市需要换零钱,超市提供的零钱有1元面值,2元 ...