vue项目出现页面空白的解决方案
今天新建项目,然后发现路由也改了 app.vue里面也是啥都没有,
但是访问http://localhost:8080/#/login 能访问 里面确实空白的
错误:
错误原因:
path: '/' 只能有1个 整个项目只能有一个【但是我有了2个】,然后我要重定向到login页面,我path又没配置好。
导致页面啥都出不来。
解决办法如下:
以上这篇vue项目出现页面空白的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'his
-
详解Vue路由History mode模式中页面无法渲染的原因及解决
Vue下路由History mode导致页面无法渲染的原因 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 一般开发的单页应用的URL都会带有#号的hash模式,因为整个应用本身而言就只有一个HTML,其他的都是通过router来渲染.如果因为业务
-
VUE 解决mode为history页面为空白的问题
当router.js 中mode:history 发现刷新页面 不显示了,原因出来history的请求路径资源不存在了,这个需要后端配置的, 前端 需要修改一个地方即可, devServer: { port: 8000, host: '0.0.0.0', overlay: { errors: true }, hot: true, historyApiFallback: { index: '/index.html' } }, 新增historyApiFallback这个个功能,然后的index的路
-
解决vue 打包发布去#和页面空白的问题
1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTown
-
vue项目出现页面空白的解决方案
今天新建项目,然后发现路由也改了 app.vue里面也是啥都没有, 但是访问http://localhost:8080/#/login 能访问 里面确实空白的 错误: 错误原因: path: '/' 只能有1个 整个项目只能有一个[但是我有了2个],然后我要重定向到login页面,我path又没配置好. 导致页面啥都出不来. 解决办法如下: 以上这篇vue项目出现页面空白的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t
-
vue项目实现页面跳转的方法
目录 1.创建一个vue-cli默认项目(仅包含babel) 2.进入创建文件 3.检查配置 4.创建views文件夹 5.设置APP.vue 6.进行main.js的配置 7.运行结果 问题描述: vue-router是前端开发中用来实现路由页面跳转的一个模块.下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转. 实验结果与讨论 : 1.创建一个vue-cli默认项目(仅包含babel) 2.进入创建文件 以管理员身份进入创建的文件路径内,并运行命令npm instal
-
vue修改数据页面无效的解决方案
目录 vue修改数据页面无效 如下案例 有两种解决方案 更改数据后页面不刷新的问题 vue修改数据页面无效 项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性. 如下案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
-
vue项目内存溢出问题及解决方案
目录 vue项目内存溢出的解决 vue项目内存溢出问题 问题 解决方法1 解决方法2 总结 vue项目内存溢出的解决 最近在对原有项目进行迭代升级,有用代码越来越多,导致内存溢出了. 正常启动运行还是可以的,但是 只要对代码进行简单修改,在热更新的时候项目就会直接崩掉.这就导致了10分支的开发差不多有7分钟的时间在重启项目,严重影响开发效率,让人上火. 刚好同事之前也遇到过,特点问了一下解决方式. 说下解决 npm install -g increase-memory-limit npx cro
-
Vue项目部署在Spring Boot出现页面空白问题的解决方案
网上流行的解决方案是将assetsPublicPath: '/'改成'./',下面说一下这个解决方案的弊端: 通常页面空白的问题出现大多数是由于Spring Boot端配置了server.servlet.context-path,上下文改变了css, js等文件的访问路径,文件无法加载导致index.html显示空白.'/'改成'./'是将绝对路径变为相对路径,可以动态适应Spring Boot端上下文的改变,这是为什么这个解决方案起作用的原因. Vue项目部署在Spring Boot出现的另一
-
vue项目打包后打开页面空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bulid模块导出的路径.因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的.先看一下默认的路径. module.exports = { build: { env: require('./prod.env'), index: path.resolve(__
-
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最后单页面的最终文件. 问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由. 这样的话页面就是空白了,因为没有组件被添加到页面中.打开F12会看到一堆的红色failed请求.打开请求地址是这样的. 进入D盘就开始寻找static文件夹当然是找不到的.既然知道了是打包之后寻找文件
-
vue.js打包项目后页面出现空白的解决办法
相信很多刚刚接触vue的伙伴会遇到这样的问题,就是说vue项目在开发环境下一切正常,但是打包之后,打开index.html页面却是一片空白,打开控制台发现这样的错误 出现这种情况要分两个处理方式(vue-cli2和vue-cli3),先说vue-cli2: 首先找到config/index.js文件,将assetPublicPath的路径改为"./"即可, vue-cli3的话要稍微麻烦些,因为vue-cli3简洁了许多,没有了配置文件,所以需要自己创建,只能在项目的根目录下创建,并且
随机推荐
- Swift教程之闭包详解
- JS查找字符串中出现次数最多的字符
- asp .net实现给图片添加图片水印方法示例
- CI分页类首页、尾页不显示的解决方法
- php设计模式 Interpreter(解释器模式)
- haskell实现多线程服务器实例代码
- 跟老齐学Python之眼花缭乱的运算符
- C++的static关键字及变量存储位置总结
- 用js将内容复制到剪贴板兼容浏览器
- 浅析Java中的继承与组合
- Ruby基础知识之基本流程控制
- 加随机数引入脚本不让浏览器读取缓存
- IE之动态添加DOM节点触发window.resize事件
- 基于android中读取assets目录下a.txt文件并进行解析的深入分析
- Android实现闪屏欢迎界面
- asp.net部署到IIS常见问题的解决方法
- SpringBoot2.X Kotlin系列之数据校验和异常处理详解
- 微信小程序实现两边小中间大的轮播效果的示例代码
- Java ThreadPoolExecutor 线程池的使用介绍
- java正则表达式获取大括号小括号内容并判断数字和小数亲测可用