做了一个demo,想看一下打包之后的样子,发现页面是空的。

发现问题就要解决:

1.首先看控制台没有报任何错误,那就证明我们的代码是没有任何问题的。

只能是路径问题造成的。

2.在路由router/index.js中加入一个404页面,代码引入创建之类的就不说了。也就是说只要路径错误,Error这个vue组件就会显示

{
path: '*',
name: '404',
component: Error,
hidden: true
}

3.再打包,发现新增的Error果然出现。

4.再次证明是路径问题,想到路由有个mode模式

之前考虑到原先的默认模式(也就是地址后面带"#")很不习惯,所以改为history模式了

export default new Router({
mode:'history',
routes: [
{
。。。

5.看下是不是这个问题

把history模式去掉

再打包

OK,一切正常

补充一下:

看一下config/index.js 里面

把绝对路径改为相对路径!!!!!

vue-cli打包之后页面为空的问题。的更多相关文章

  1. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  2. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  3. vue项目打包之后页面空白解决办法

    之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...

  4. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  5. Vue打包后页面出现cannot get

    学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ...

  6. VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。

    场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ...

  7. vue cli 3 打包过大问题

    vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...

  8. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  9. Vue build打包之后,刷新页面出现404解决方案

    Vue build打包之后,刷新页面出现404,HTML5 History 模式 原因分析: vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于 ...

随机推荐

  1. 移动端rem匹配

    Rem是相对于根元素font-size大小的单位 记inphone5屏幕宽度是 320px font-size16px 1rem=16px <html>   <head>    ...

  2. 【luogu题解】P1546 最短网络 Agri-Net

    题目 约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享给其他农场.为了用最小的消费,他想铺设最短的光纤去连接所有的农场. 你将得到一份各农场之间连接费用的列表,你必须找出能连接所有农场并 ...

  3. Python9-MySQL索引-外键-day43

    1.以ATM引出DBMS2.MySQL -服务端 -客户端3.通信交流 -授权 -SQL语句 -数据库 create database db1 default charset=utf8; drop d ...

  4. 解析XML格式数据

    学习解析XML格式的数据前,搭建一个简单的web服务器,在这个服务器上提供xml文本用于练习. 一.搭建Apache服务器 在Apache官网下载编译好的服务器程序,安装.对于Windows来说127 ...

  5. A Bug's Life POJ - 2492 (带权并查集)

    A Bug's Life POJ - 2492 Background Professor Hopper is researching the sexual behavior of a rare spe ...

  6. Java基础知识:Collection接口

    *本文是最近学习到的知识的记录以及分享,算不上原创. *参考文献见文末. 这篇文章主要讲的是java的Collection接口派生的两个子接口List和Set. 目录 Collection框架 Lis ...

  7. CyclicBarrier源码分析

    CyclicBarrier是通过ReentrantLock(独占锁)和Condition来实现的.下面,我们分析CyclicBarrier中3个核心函数: 构造函数, await()作出分析. 1. ...

  8. Spring加载配置文件的几种方法(org.springframework.beans.factory.BeanDefinitionStoreException)

    一:Spring中的几种容器都支持使用xml装配bean,包括:XmlBeanFactory ,ClassPathXmlApplicationContext ,FileSystemXmlApplica ...

  9. easyui-combogrid匹配查询

    用到easyui-combogrid,数据比较少的情况,可以一页就显示完毕,然后直接下拉选择.但是对于数据量比较大的情况,一页显示全部显然不合适,好在从easyui-combogrid的数据加载方式可 ...

  10. AppDOMain(摘录)

    AppDomain是CLR的运行单元,它可以加载Assembly.创建对象以及执行程序. AppDomain是CLR实现 代码隔离 的基本机制. 每一个AppDomain可以单独运行.停止:每个App ...