如何解决vue2.0 打包之后 打开index.html出现空白页

1.打包之前修改三个文件
       1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右 有一个对象为 output,在这里面增加一行代码

publicPath:'./'

  output: {
//在这里加一行代码
publicPath:'./',     path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
   

1.2.第二步,找到utils.js,在 第47行左右 有一个if判断为 if (options.extract),在这里面增加一行代码

     注意:这个是保证 加载背景图片等css样式资源不出现 路径问题

publicPath:'../../'

    if (options.extract) {
return ExtractTextPlugin.extract({
publicPath:'../../',
use: loaders,
fallback: 'vue-style-loader'
})
}

1.3.第三步,找到config/index.js第46行左右 修改assetsPublicPath 路径为 './';

2.然后你就可以  build 了,

3.如果build 完成后 在本地还是空白页  或者说 放到服务器上面 是空白页  怎么办

   3.1 这个就有可能是 你的路由模式  出现了问题  你给的路由模式可能是history 模式 ,这个文档说了 如果设置这个模式的话需要后端的配合 设置一些参数的 ,所以如果没有后端的配合的话 ,你就把这个路由的mode 改为 hash  或者是直接删除  就是默认的模式了

如何解决vue2.0 打包之后 打开index.html出现空白页的更多相关文章

  1. Vue通过build打包后 打开index.html页面是空白的

    最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...

  2. 解决vue2.0路由 TypeError: Cannot read property 'matched' of undefined 的错误问题

    刚开始使用vue-router2.0,虽然也用了vux,用起来却发现一个问题--具体如下: 正常情况下使用脚手架跑完之后,然后修改源项目,首先在main.js入口里把该import进去的vuex,vu ...

  3. vue2.0关于for循环 index的使用方法

    <!DOCTYPE html> <html> <head> <title>for循环</title> </head> <b ...

  4. 解决vue2.0下IE浏览器白屏问题

    公司新开发的项目需要兼容到IE9+ 就在index.html页面加入 <meta http-equiv="X-UA-Compatible" content="IE= ...

  5. 巧妙解决vue2.0关于set添加属性后视图不能更新的问题

    今天在工作中遇到一个问题,郁闷了很久,特地写一篇博客记录一下,方便以后再遇到可以查找,也分享个各位小伙伴,在网上查找很多资料说用Vue.$set设置属性后视图也会更新,但是真相并不是这样,通过等于号赋 ...

  6. 解决Android8.0系统应用打开webView报错

    由于webView存在安全漏洞,谷歌从5.1开始全面禁止系统应用使用webview,使用会导致应用崩溃错误提示:Caused by: java.lang.UnsupportedOperationExc ...

  7. vue2.0+mint-ui资讯类顶导航和内容页联动实例(不是很完美)

    <template> <div> <div class="navbox"> <div class="nav"> ...

  8. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  9. 如何解决谷歌Chrome浏览器空白页的问题

    如何解决谷歌Chrome浏览器空白页的问题   谷歌Chrome浏览器突然不打开任何网页,无论是任何站点(如http://www.baidu.com), 还是Chrome浏览器的设置页面(chrome ...

随机推荐

  1. Zeal(文档)安装使用

    Zeal是一个为软件开发者提供的离线文档浏览器. 一.下载安装 下载地址:https://zealdocs.org/ 二.安装后下载自己需要的文档 1.通过Zeal原生源直接下载文档 Tools -& ...

  2. Luogu P4643 阿狸和桃子的游戏

    题解 传送门 既然题目要求的是差值 所以对于减数和被减数同时加上一个相同的数是毫无影响的 (详情参考人教版六年级上册数学教材) 所以不妨把边权分成两半 分别加给两个顶点 然后,直接每次选最大的点就好了 ...

  3. NB-IOT覆盖能力有多强 是怎么实现的

    NB-IoT技术中出现以来就以其强大的覆盖能力和通信距离长而受到广大使用者的欢迎,那么NB-IoT覆盖能力究竟是有多大,其覆盖能力应该怎么来衡量? 强大的覆盖能力是NB-IoT技术的最大特点之一,不仅 ...

  4. SpringBoot第五集:整合监听器/过滤器和拦截器(2020最新最易懂)

    SpringBoot第五集:整合监听器/过滤器和拦截器(2020最新最易懂) 在实际开发过程中,经常会碰见一些比如系统启动初始化信息.统计在线人数.在线用户数.过滤敏/高词汇.访问权限控制(URL级别 ...

  5. debian 安裝SSH 增加新用戶 并使用sudo

    1 新建新用戶user 2 3 adduser user 4 5 passwd 123654 6 7 exit 刚安装好的Debian默认还没有sudo功能. 1.安装sudo # apt-get i ...

  6. python使用matplotlib画图,jieba分词、词云、selenuium、图片、音频、视频、文字识别、人脸识别

    一.使用matplotlib画图 关注公众号"轻松学编程"了解更多. 使用matplotlib画柱形图 import matplotlib from matplotlib impo ...

  7. 微服务通信之ribbon实现原理

    前言 上一篇我们知道了feign调用实现负载均衡是通过集成ribbon实现的.也较为详细的了解到了集成的过程.现在我们看一下ribbo是如何实现负载均衡的.写到这里我尚未去阅读源代码,我在这里盲猜一下 ...

  8. 基于synchronized锁的深度解析

    1. 问题引入 小伙伴们都接触过线程,也都会使用线程,今天我们要讲的是线程安全相关的内容,在这之前我们先来看一个简单的代码案例. 代码案例: /** * @url: i-code.online * @ ...

  9. vue踩坑

    1. 双向绑定的对象 改变或新增其属性 DOM不刷新问题 var obj = { "attr1": "1", "attr2": [2] }; ...

  10. 11 幂等 Idempotence

    11 幂等 Idempotence HTTP方法的幂等性是指一次和多次请求某一个资源应该具有同样的副作用.(注意是副作用) GET http://www.bank.com/account/123456 ...