vue history模式下出现空白页情况

  • 问题描述:

   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/”。

 其次,这个文件夹是服务器放项目的文件夹,不是你本地项目的文件夹位置!!

原文地址:https://www.cnblogs.com/lemoncool/p/11271925.html

时间: 2024-11-01 10:08:03

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

vue项目history模式下微信分享相关问题

import wx from '@/utils/wx' import { shareApi } from '@/api' // 微信验证 export function requireConfig() { let url = window.location.href shareApi.share({ url: url }).then(res => { if (res.code === 200) { wx.config({ debug: false, appId: res.data.appid,

VUE的history模式下除了index外其他路由404报错

location / {index index.html;root /dist;try_files $uri $uri/ /index.html;}try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配.然后去到网站目录下去查找文件是否存在,如果存在直接读取返回.如果不存在直接跳转到第三个参数. 现在不明白的是既然跳到了index为什么显示的还是路由后的界面 原文地址:https://blog.51cto.com/14207669/2431296

vuex项目history模式下404问题的解决方案

在 ” etc/nginx/conf.d/  “路径下修改你的当前项目的conf文件 在location中添加,下文中加粗部分的代码,实现重写路径,以避免出现404. location / { root /root/www/dist; index index.html index.htm; if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; } } 其他解决方案请参考 https://blog.csdn.net

vue.js 打包时出现空白页和路径错误

vue-cli输入命令:npm  run  build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsPublicPath属

Vue在IE下显示空白问题

主要是IE对promise的支持不好,我也是搜索后解决的,主要参考这个网站https://babeljs.io/docs/usage/polyfill/ 安装 npm install --save babel-polyfill 在package.json中添加依赖, devDependencies:{ - "babel-polyfill": "^6.22.0" } 在app.vue中添加引用"import 'babel-polyfill'" 在w

Laravel+vue实现history模式URL可行方案

项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. hash URL 例如:http://yoursite.com/#/user/id. history 模式时,URL就像正常的 url,例如 http://yoursite.com/user/id. 没有特别的要求的话,hash模式亦正常访问.好嘛,产品要求URL要像正常那样的 -- history模

vue路由的两种模式配置以及history模式下面后端如何配置

vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面.2.history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法.需要特定浏览器支持history模式,会出现404 的情况,需要后台配置.3.hash模式下,仅hash符号之前的内容会被包含在请求

hash 模式与 history 模式小记

hash 模式 这里的 hash 就是指 url 后的 # 号以及后面的字符.比如说 "www.baidu.com/#hashhash" ,其中 "#hashhash" 就是我们期望的 hash 值. 由于 hash 值的变化不会导致浏览器像服务器发送请求,而且 hash 的改变会触发 hashchange 事件,浏览器的前进后退也能对其进行控制,所以在 H5 的 history 模式出现之前,基本都是使用 hash 模式来实现前端路由. history 模式 利用

Vue-router 中hash模式和history模式的关系

Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端