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 ...
随机推荐
- 08 网络配置、shh服务、bash命令和元字符
作业一:完成作业未做完的集群架构作业二:临时配置网络(ip,网关,dns)+永久配置 作业三:为集群内的机器设定主机名,利用/etc/hosts文件来解析自己的集群中所有的主机名,相应的,集群的配置应 ...
- PKU 3169 Layout(差分约束系统+Bellman Ford)
题目大意:原题链接 当排队等候喂食时,奶牛喜欢和它们的朋友站得靠近些.FJ有N(2<=N<=1000)头奶牛,编号从1到N,沿一条直线站着等候喂食.奶牛排在队伍中的顺序和它们的编号是相同的 ...
- 46. Permutations (全排列)
Given a collection of distinct numbers, return all possible permutations. For example,[1,2,3] have t ...
- POJ - 2699 The Maximum Number of Strong Kings (最大流+枚举)
题意:有n(n<=10)个选手,两两之间打比赛,共有n*(n-1)/2场比赛,赢一场得1分.给出每个人最后的得分.求有多少个定义如下的strong king:赢了所有得分比自己高的人或本身就是分 ...
- python的socket网络编程(二)
(注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 国庆八天假,已过去3天了,加上明天又是中秋,还是决定在今晚把之前想写的东西写完.国庆节在宁波老家,吃好喝好睡好,就是没有好好 ...
- Laravel 学习记录
1.当配置 根目录没有指向/public 时 去掉www.blog.im/public 后的文件 需要把 public 文件夹里的..htaccess 文件放到 项目根目录.server.ph ...
- sift算法特征点如何匹配?
https://www.zhihu.com/question/23371175 我需要把一张照片和训练集中的图片进行匹配.我把一张照片提取特征值并建立kd树,然后把训练集的图片依次读进来,然后把图片的 ...
- 一.复习GCC编译器的用法
1.复习GCC编译器的用法 欲善其工,那么要先利其器.在这个C语言巩固与提高的阶段中,如果想要更好的达成预期目标,首先就要熟练掌握GCC编译器的用法.以下是GCC相关知识: GCC使用语法 gcc 选 ...
- ERROR 1093 (HY000): You can't specify target table 'test' for update in FROM clause
MySQL执行更新语句报错: 更新语句:UPDATE test SET state=50 WHERE num IN(SELECT num FROM test WHERE state=60): 报错:E ...
- MAC OS X的命令行技巧
##透明度#降低透明度defaults write com.apple.universalaccess reduceTransparency -bool true#恢复默认透明度defaults wr ...