vue项目使用hbuilder打包后,真机测试白屏
在命令行直接运行 npm run build
后,生成的dist
文件中,直接打开index.html
文件
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
打包完后,提示只能在服务端可以开启,file模式下无法工作
问题: 使用vue脚手架开发的spa项目,在打包为app时,出现白屏现象
原因: 想要在手机端打开,等同于在本地file模式下打开,因而需要作出判断
会出现两种结果,在
pc端
- 打开后白屏;
- 可以打开页面
处理方案 :
打开后白屏
- 原因在于打开需要在服务端,而不是本地打开
file
模式下。需要修改webpack
中的代码。根路径,改为相对路径
// config文件夹 ==> index.js ==> build 中修改 assetsPublicPath 为相对路径
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', 修改为'./' 根路径变为相对路径
vue-router
中模式修改为hash
如果是history
下,页面无法显示图片等
// src文件夹 ==> router文件夹 ==> index.js中找到 new Router
export default new Router({
mode: 'history', //修改为hash 或者直接去除
routes: []
可以打开页面
在上面两个都已经解决完后,使用hbuild
打包为app
后,在手机端依旧打开白屏。此时已经不是模式等问题,而应该考虑其他问题,比如es6语法支持程度等等
3. 因为promise
支持程度不是很好,需要使用 babel-polyfill
进行支持
//build文件夹 ==> webpack.base.conf.js中添加
//下载包后,引入
require('babel-polyfill')
//入口文件中 添加
entry: {
//为了 es6 的promise
app: ['babel-polyfill','./src/main.js'] / / app: './src/main.js'
},
经过这些处理,在手机端应该就可以查看了
vue项目使用hbuilder打包后,真机测试白屏的更多相关文章
- unity工程接入Android sdk后真机测试解锁屏后退出的解决
unity工程接入如91.移动支付等Android sdk后,真机运行尤其是在4.0+以上坏境,往往会出现解锁屏后退出的情况,解决办法如下: 可以在AndroidManifest.xml中所有的con ...
- vue项目再HBuilder打包成app后,有ui模块未添加的弹窗
直接在打包后的mainifst.json的文件夹中加入标注部分,我是这样解决了的
- VUE项目用hbuilder 打包为手机APP
一.测试项目是否可以正确运行 指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...
- 记录下自己VUE项目用Hbuider打包后启动白屏问题
刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)
最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
- Vue项目创建build打包后可修改的配置文件
需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置. 实现方法如下: 1.在项目的static目录下创建project.config.json文件(名称随意,建 ...
- vue项目 使用Hbuilder打包app 设置沉浸式状态栏
使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusb ...
- vue项目用webpack打包后跨域问题
在app.js的最开始加上 app.all('*', (req, res, next) => { res.header("Access-Control-Allow-Origin&quo ...
随机推荐
- Spring入门学习推荐
该作者的 spring 博客很好,作为学习用 简介 https://blog.csdn.net/column/details/15088.html?&page=1 https://blog.c ...
- 高并发下hystrix熔断超时及concurrent.RejectedExecutionException: Rejected command because thread-pool queueSize is at rejection threshold问题
我的一个项目并发200+,观察服务器的日志发现出现了大量的熔断超时偶尔会闪现出RejectedExecutionException: Rejected command because thread-p ...
- 【转】Google的2012论文
转自:http://www.sigvc.org/bbs/thread-1152-1-1.html Google的论文一直是业界的风向标,尤其在机器学习.分布式系统.网络等方面很多创新性的成果都是由他们 ...
- laravel 环境配置
一.composer 安装 1.确定为最新版本的PHP 2.进入Composer官网下载页面,在页面最下方Manual Download区域选择需要的版本下载. 3.将下载的composer.phar ...
- ABP官方文档翻译 1.2 N层架构
N层架构 介绍 ABP架构 其他(通用) 领域层 应用层 基础设施层 网络和展现层 其他 总结 介绍 应用程序代码库的分层架构是被广泛认可的可以减少程序复杂度.提高代码复用率的技术.为了实现分层架构, ...
- PHP(Mysql/Redis)消息队列的介绍及应用场景案例
在进行网站设计的时候,有时候会遇到给用户大量发送短信,或者订单系统有大量的日志需要记录,还有做秒杀设计的时候,服务器无法承受这种瞬间的压力,无法正常处理,咱们怎么才能保证系统正常有效的运行呢?这时候我 ...
- 20145314郑凯杰《信息安全系统设计基础》第9周学习总结 PART B
20145314郑凯杰<信息安全系统设计基础>第9周学习总结 PART B 明确教材学习目标 注意每个系统调用的参数.返回值,会查帮助文档 阅读教材,完成课后练习(书中有参考答案),考核: ...
- Android系统启动过程[典☆☆☆]
Android系统启动过程 首先Android框架架构图:(来自网上,我觉得这张图看起来很清晰) Linux内核启动之后就到Android Init进程,进而启动Android相关的服务和应用. 启动 ...
- JAVA基础补漏--可变参数
使用场景:当参数列表数据类型已确定,但参数的个数不确定,就可以用可变参数 格式: 修饰符 返回值类型 方法名(数据类型...变量名){} 原理:可变参数底层为一数组,可根据变量个数的不同,创建不同长度 ...
- java中枚举类的实际应用
知识点:在Java中,使用枚举类,当遇到实例类型有限的类时,并且数据库中用状态码代表一种含义时,如星期,性别,员工登陆某系统的状态等等, 可以考虑使用枚举类 本例子可以仿照,也可以使用自定义的类型处理 ...