vue项目打包后打开页面空白解决办法


Posted in Javascript onJune 29, 2018

网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白。这个主要原因是路径的问题。

1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

assetsPublicPath默认的是  ‘/'  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ '

2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。

// mode: 'history' // 默认hash

如果不会打包vue项目,请看我写的另外一篇详细教程:Vue webapp项目通过HBulider打包原生APP

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
谈谈JS中的!!
Dec 07 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 #Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 #Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 #Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 #Javascript
vue ssr 指南详读
Jun 29 #Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 #Javascript
You might like
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python全栈之列表数据类型详解
2019/10/01 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
大学生职业生涯设计书
2014/01/02 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
社区母亲节活动记录
2014/03/06 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
初中信息技术教学计划
2015/01/22 职场文书
2015年化验室工作总结
2015/04/23 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python