如何解决vue2.0 打包之后 打开index.html出现空白页
如何解决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出现空白页的更多相关文章
- Vue通过build打包后 打开index.html页面是空白的
最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...
- 解决vue2.0路由 TypeError: Cannot read property 'matched' of undefined 的错误问题
刚开始使用vue-router2.0,虽然也用了vux,用起来却发现一个问题--具体如下: 正常情况下使用脚手架跑完之后,然后修改源项目,首先在main.js入口里把该import进去的vuex,vu ...
- vue2.0关于for循环 index的使用方法
<!DOCTYPE html> <html> <head> <title>for循环</title> </head> <b ...
- 解决vue2.0下IE浏览器白屏问题
公司新开发的项目需要兼容到IE9+ 就在index.html页面加入 <meta http-equiv="X-UA-Compatible" content="IE= ...
- 巧妙解决vue2.0关于set添加属性后视图不能更新的问题
今天在工作中遇到一个问题,郁闷了很久,特地写一篇博客记录一下,方便以后再遇到可以查找,也分享个各位小伙伴,在网上查找很多资料说用Vue.$set设置属性后视图也会更新,但是真相并不是这样,通过等于号赋 ...
- 解决Android8.0系统应用打开webView报错
由于webView存在安全漏洞,谷歌从5.1开始全面禁止系统应用使用webview,使用会导致应用崩溃错误提示:Caused by: java.lang.UnsupportedOperationExc ...
- vue2.0+mint-ui资讯类顶导航和内容页联动实例(不是很完美)
<template> <div> <div class="navbox"> <div class="nav"> ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- 如何解决谷歌Chrome浏览器空白页的问题
如何解决谷歌Chrome浏览器空白页的问题 谷歌Chrome浏览器突然不打开任何网页,无论是任何站点(如http://www.baidu.com), 还是Chrome浏览器的设置页面(chrome ...
随机推荐
- Dev中配置graphcis.h
下载地址:http://winbgim.codecutter.org/ 搞得自己有点奔溃 没成功 尝试了全网的所以的方法都没成功
- 【总结】docker
1 docker概述 1.1 docker简介 Docker目标是实现轻量级的操作系统虚拟化解决方案.比虚拟机更轻量级. 虚拟机可以理解成一栋楼里的一个个房间(共享花园基地等),而docker可以理解 ...
- [论文阅读]阿里DIEN深度兴趣进化网络之总体解读
[论文阅读]阿里DIEN深度兴趣进化网络之总体解读 目录 [论文阅读]阿里DIEN深度兴趣进化网络之总体解读 0x00 摘要 0x01论文概要 1.1 文章信息 1.2 基本观点 1.2.1 DIN的 ...
- 云计算管理平台之OpenStack块存储服务cinder
一.cinder简介 cinder是openstack环境中的块存储服务,主要为运行在openstack之上的虚拟机提供块存储服务的:所谓块存储就是我们经常用的硬盘呀,U盘啊,SD卡等等这些块设备的, ...
- [Luogu P1119] 灾后重建 (floyd)
题面 传送门:https://www.luogu.org/problemnew/show/P1119 Solution 这题的思想很巧妙. 首先,我们可以考虑一下最暴力的做法,对每个时刻的所有点都求一 ...
- Spider Storage Engine
这个引擎可以完成MySQL的数据库分片
- P1098 字符串的展开
P1098 字符串的展开 刷新三观的模拟题 题意描述 太长了自己去看吧. 算法分析 模拟题分析你*呀! 写这篇题解的唯一原因是:三目运算符用的好的话,可以让百行大模拟变成30行水题. 代码实现 #in ...
- DP斜率优化学习笔记
斜率优化 首先,可以进行斜率优化的DP方程式一般式为$dp[i]=\max_{j=1}^{i-1}/\min_{j=1}^{i-1}\{a(i)*x(j)+b(i)*y(j)\}$ 其中$a(j)$和 ...
- [MIT6.006] 13. Breadth-First Search (BFS) 广度优先搜索
一.图 在正式进入广度优先搜索的学习前,先了解下图: 图分为有向图和无向图,由点vertices和边edges构成.图有很多应用,例如:网页爬取,社交网络,网络传播,垃圾回收,模型检查,数学推断检查和 ...
- 模拟鼠标操作(ActionChains)(转 侵删)
在日常的测试中,经常会遇到需要鼠标去操作的一些事情,比如说悬浮菜单.拖动验证码等,这一节我们来学习如何使用webdriver模拟鼠标的操作 首页模拟鼠标的操作要首先引入ActionChains的包 f ...