如何解决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. web worker的介绍和使用

    目录 简介 Web Workers的基本概念和使用 Web Workers的分类 worker和main thread之间的数据传输 简介 什么是web worker呢?从名字上就可以看出,web w ...

  2. Redis常用命令(6)——SortedSet

    ZADD 格式:ZADD key score member [[score member] [score member] ...] 作用:向有序集合key中插入一个或多个元素.如果元素已经存在,更新s ...

  3. Linux 系统编程 学习:01-进程的有关概念 与 创建、回收

    Linux 系统编程 学习:01-进程的有关概念 与 创建.回收 背景 上一讲介绍了有关系统编程的概念.这一讲,我们针对 进程 开展学习. 概念 进程的身份证(PID) 每一个进程都有一个唯一的身份证 ...

  4. 记一次微信公众号(微信H5)网页对接腾讯云慧眼人脸核验开发笔记

    需求是这样的,客户需要一个在观看学习视频前弹出人脸识别核验真人的功能,客户找了个APP作为参考,但是在微信上第三方人脸识别是无法直接调取到前置摄像头的,都是通过用户自己获取用户的身份信息或者照片,然后 ...

  5. 【HNOI】分数分解

    题意描述 近来 IOI 专家们正在进行一项有关整数方程的研究,研究涉及到整数方程解集的统计问题,问题是这样的. 对任意的正整数 \(n\),我们有整数方程: \[\frac{1}{x_1}+\frac ...

  6. 漫谈:从APP崩溃率标准,到Monkey介绍拓展Maxim,及Jenkins自动化配置,持续集成获取崩溃monkey日志

    漫谈:从APP崩溃率标准,到Monkey介绍拓展Maxim,及Jenkins自动化配置,持续集成获取崩溃日志 1.APP崩溃率标准 开发或测试app的同学,对于app崩溃肯定非常熟悉,频繁的线上崩溃属 ...

  7. ELK搭建以及运行和ElasticStarch的详细使用(7.X版本之上)

      ELK初体验     1.官网   https://www.elastic.co/cn/downloads/elasticsearch   2.需要安装JDK   ElasticSearch 是一 ...

  8. MySQL全面瓦解6:查询的基本操作

    概述 提到查询,就回到我们第四篇的SQL语言分类了,DQL(Data QueryLanguage),也就是数据查询语言,实际就是从数据库中获取数据的一种命令方式.我们给数据库发送一个查询语句的命令,数 ...

  9. 老师问学生while判断

    老师问学生,这道题你会做了吗?如果学生答"会了(y)",则可以放学.如果学生不会做(n),则老师再讲一遍,再问学生是否会做了...... (1)直到学生会为止,才可以放学. (2) ...

  10. layui下拉框实现级联

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <link href ...