如何解决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. Kubernetes 配置私有镜像仓库时,没有权限访问的问题

    使用 K8S 部署服务时,如果指定的镜像地址是内部镜像仓库,那么在下载镜像的时候可能会报权限错误.这是由于在 K8S 中部署服务时,K8S 需要到 Harbor 中进行一次验证,这个验证与节点中使用 ...

  2. POI CellStyle 中样式覆盖问题

    问题描述 在使用 Apache POI-3.8的时候,需要一个功能,就是处理上传得 Excel的 cell style.如果数据有错误,则标红或者加上其他 style 标识.但是当直接获取到 cell ...

  3. DTU有哪些功能特点?

    DTU指的是一种数据终端设备(Data Terminal unit),可以把它简单理解为下位GPRS发射终端,在进行通信的时候,传输数据的链路两端肯定是存在DTU,所传信息进行格式转换和数据整理效验都 ...

  4. 获取List集合对象中某一列属性值

    例:获取disposeList集合中CorpusMarkPage对象中的responseId属性,生成新的List集合 List<String> responseIdList = disp ...

  5. yaf拓展安装步骤

    1.wget http://pecl.php.net/get/yaf-3.0.7.tgz //下载yaf.tar 2.tar zxvf yaf-3.0.7.tgz //解压 3.cd yaf-3.0. ...

  6. <摘自>飞:jxl简析2 [ http://www.emlog.net/fei ]

    [<摘自>飞:jxl简析:http://www.emlog.net/fei] (二)应用 在进行实践前 , 我们需要对 excel 有一个大致的了解 ,excel 文件由一个工作簿 (Wo ...

  7. socket里面那个又爱又恨的锁

    查一个问题:结果看了一下软中断以及系统 所耗cpu,心中满是伤痕啊------- perf 结果一眼可以看到:主要是锁 那么这个lock 是用来干什么的呢?? A:TCP socket的使用者有两种: ...

  8. linux 进程间通信 共享内存 shmat

    系统调用mmap()通过映射一个普通文件实现共享内存.系统V则是通过映射特殊文件系统shm中的文件实现进程间的共享内存通信.也就是说,每个共享内存区域对应特殊文件系统shm中的一个文件(这是通过shm ...

  9. ssh2中的添,删,查,改。

    1.spring封装的HibernateTemplate类的一些操作方法. 2.session提供的根据主键ID进行添.删.查.改的基本方法. 由session得到的hql语句 由session得到的 ...

  10. python脚本打包成rpm软件包

    前言 软件最终都会有交付的形式,有的是用tar包,有个是以目录,有的是封成一个文件包,从大多数使用场景来说,直接打包成软件包的方式是最简单,也是最不容易出错的,路径可以在包里面写死了 实践 关于打包的 ...