项目场景

  vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号。
  现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下:
import Vue from 'vue';
import App from './App';
import routers from './router';
import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = new VueRouter({
mode: 'history',
routes: routers
}); /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
});

问题:页面空白

mode: 'history',使用这个模式,在开发阶段一切都是正常的,访问地址是localhost:8888,以上没什么错误,一切都好用。url里也没有#了。可是打包之后,访问项目会发现页面一片空白的情况。不是404,不报错,只是空白!!

解决办法:

  1. 很多项目都放在了服务器根目录下面,访问后的url就是:http://123.com,这是一种解决办法
  2. 假如我的项目没有放在服务器根目录下,放在了服务器的nice/app下,那么打开地址是:http://123.com/nice/app

那么这里问题就来了,我们配的路由中并没有nice/app,所以无法找到路径中的组件,所以也就无法渲染了。这就是导致空白的原因!

此时只需要修改router中的index.js,给路由中加一个base的属性,值为 ‘/nice/app/’就可以了。代码:

const router = new VueRouter({
mode: 'history',
base: '/nice/app/',
routes: routers
});

注意

  记住这个base,base值两边一定要有"/",不要写成“nice/app”、“/nice/app”或者“nice/app/”。
     其次,这个文件夹是服务器放项目的文件夹,不是你本地项目的文件夹位置!!
 

vue history模式下出现空白页情况的更多相关文章

  1. vue history模式下的微信分享

    // 微信验证 export function requireConfig() { let url = window.location.href systemApi.wxoption({ url: u ...

  2. vue history模式下的微信支付,及微信支付授权目录的填写,处理URL未注册

    微信公众号配置网页授权域名:填写网址域名 微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/p ...

  3. 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题

    一. 异常描述: 本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会 ...

  4. react history模式下的白屏问题

    近期,再用react的时候,由于不想用丑陋的hash,便将路由模式切换成history了,结果带来了一些问题,比如刷新白屏,还有图片加载不出来,这里我们说一下解决方案. 原因 首先,我们说一下造成这一 ...

  5. VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示

    VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示: “事件”引起变量值的变化,系统引擎自动根据变量值的变化刷新页面 在VUE Nod ...

  6. vue history模式 ios微信分享坑

    vue history模式 ios微信分享坑 问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享 ...

  7. Tomcat 配置Vue history模式

    Tomcat 配置Vue  history模式 近日 , 在使用 Tomcat 部署Vue项目时 , 刷新项目出现404的异常 . 原因是 Vue使用了history模式 , 而tomcat没有相关配 ...

  8. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

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

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

随机推荐

  1. ABP开发框架前后端开发系列---(9)ABP框架的权限控制管理

    在前面两篇随笔<ABP开发框架前后端开发系列---(7)系统审计日志和登录日志的管理>和<ABP开发框架前后端开发系列---(8)ABP框架之Winform界面的开发过程>开始 ...

  2. 基于 Roslyn 实现动态编译

    基于 Roslyn 实现动态编译 Intro 之前做的一个数据库小工具可以支持根据 Model 代码文件生成创建表的 sql 语句,原来是基于 CodeDom 实现的,最近改成使用基于 Roslyn ...

  3. 01 Javascript简介(了解)

    Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) JavaScript历史背景介绍 布 ...

  4. 【React】react学习笔记03-React组件对象的三大属性-state

    今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...

  5. Netty源码分析--Channel注册&绑定端口(下)(七)

    接下来,我们看到的就是两个非常重要的方法 就是 processSelectedKeys() 和  runAllTasks() 方法了. selectionKey中ready的事件,如accept.co ...

  6. 手把手docker部署java应用(初级篇)

    本篇原创发布于 Flex 的个人博客:点击跳转 前言   在没有 docker 前,项目转测试是比较麻烦的一件事.首先会化较长的时间搭建测试环境,然后在测试过程中又经常出现测试说是 bug,开发说无法 ...

  7. node中websocket的使用

    web Socket和Socket.IO框架 http协议是无状态的,就是说客户端可以给服务器提交请求,但是服务器不能向客户端提交请求,但是我们实际项目中会要求客户和服务器双方是类似电话那种关系, 一 ...

  8. 13 | 效率为王:脚本与数据的解耦 + Page Object模型

  9. python3的类

    python3的类: python是一门面向对象的编程语言,学习python下的类,,能帮助自己形成一个基本的面向对象的概念.关于类和实例的理解,一个易懂的栗子就是动物类,我们把动物看做一个类,而狗啊 ...

  10. POJ 2987:Firing(最大权闭合图)

    http://poj.org/problem?id=2987 题意:有公司要裁员,每裁一个人可以得到收益(有正有负),而且如果裁掉的这个人有党羽的话,必须将这个人的所有党羽都裁除,问最少的裁员人数是多 ...