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 ...
随机推荐
- 微信小程序组件navigator
导航navigator:官方文档 Demo Code: // redirect.js navigator.js Page({ onLoad: function(options) { this.setD ...
- 1.MySQL必知必会之数据库基础
下面这几个是几个关于数据库的关键字的概念,为后面的教程做基础的: 数据库:保存有组织的数据的容器(通常是一个文件或一组文件). 表: 某种特定类型数据的结构化清单. 模式:关于数据库和表的布局 ...
- [原创]CSS 去掉点li 的点 使得LI前面的点不在显示
我对博客的认识是:记录问题,解决问题,分享知识.如果有轮子,我不需要造轮子. 1.问题解决方式: 设置属性:li {list-style-type:none;} 2.更多属性参数参考 list-sty ...
- 【VS Error】VS2008在编译时出现:Error 15 Cannot register assembly
现象: 在visual studio 2008在编译类库时提示如下错误: Error 15 Cannot register assembly "D:\01_Work\02_SVN\OCRpl ...
- Python3.x:遍历select下拉框获取value值
Python3.x:遍历select下拉框获取value值 Select提供了三种选择方法: # 通过选项的顺序,第一个为 0 select_by_index(index) # 通过value属性 s ...
- 为什么@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class})
Spring Boot会自动根据jar包的依赖来自动配置项目,例如当你项目下面有HSQLDB的依赖,Spring Boot会自动创建默认的内存数据库的数据源DataSource, 但我们使用Mybat ...
- 20145214 《Java程序设计》第3周学习总结
教材学习内容总结 对象(Object):存在的具体实体,具有明确的状态和行为 类(Class):具有相同属性和行为的一组对象的集合,用于组合各个对象所共有操作和属性的一种机制 从类看对象:类定义可以视 ...
- 20135320赵瀚青LINUX第三章读书笔记
第三章 进程管理 3.1 进程 进程的定义: 是处于执行期的程序以及它所包含的资源的总称. 线程的定义: 是在进程中活动的对象. 每个线程都拥有一个独立的程序计数器.进程栈和一组进程寄存器. 内核调度 ...
- Java搞笑注释(佛-)
// _ooOoo_ // o8888888o // 88" . "88 // (| -_- |) // O\ = /O // ____/`---'\____ // . ' \\| ...
- HDFS的回收站 && 安全模式
回收站机制 1). HDFS 的回收站机制由 core-site.xml 中 fs.trash.interval 属性(以分钟为单位)设置,默认是 0,表示未启用.注意:配置数值应该为1440,而配置 ...