在命令行直接运行 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端

  • 打开后白屏;
  • 可以打开页面

处理方案 :

打开后白屏

  1. 原因在于打开需要在服务端,而不是本地打开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: '/', 修改为'./' 根路径变为相对路径
  1. 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打包后,真机测试白屏的更多相关文章

  1. unity工程接入Android sdk后真机测试解锁屏后退出的解决

    unity工程接入如91.移动支付等Android sdk后,真机运行尤其是在4.0+以上坏境,往往会出现解锁屏后退出的情况,解决办法如下: 可以在AndroidManifest.xml中所有的con ...

  2. vue项目再HBuilder打包成app后,有ui模块未添加的弹窗

    直接在打包后的mainifst.json的文件夹中加入标注部分,我是这样解决了的

  3. VUE项目用hbuilder 打包为手机APP

    一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...

  4. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  5. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  6. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  7. Vue项目创建build打包后可修改的配置文件

    需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置. 实现方法如下: 1.在项目的static目录下创建project.config.json文件(名称随意,建 ...

  8. vue项目 使用Hbuilder打包app 设置沉浸式状态栏

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusb ...

  9. vue项目用webpack打包后跨域问题

    在app.js的最开始加上 app.all('*', (req, res, next) => { res.header("Access-Control-Allow-Origin&quo ...

随机推荐

  1. 08 网络配置、shh服务、bash命令和元字符

    作业一:完成作业未做完的集群架构作业二:临时配置网络(ip,网关,dns)+永久配置 作业三:为集群内的机器设定主机名,利用/etc/hosts文件来解析自己的集群中所有的主机名,相应的,集群的配置应 ...

  2. PKU 3169 Layout(差分约束系统+Bellman Ford)

    题目大意:原题链接 当排队等候喂食时,奶牛喜欢和它们的朋友站得靠近些.FJ有N(2<=N<=1000)头奶牛,编号从1到N,沿一条直线站着等候喂食.奶牛排在队伍中的顺序和它们的编号是相同的 ...

  3. 46. Permutations (全排列)

    Given a collection of distinct numbers, return all possible permutations. For example,[1,2,3] have t ...

  4. POJ - 2699 The Maximum Number of Strong Kings (最大流+枚举)

    题意:有n(n<=10)个选手,两两之间打比赛,共有n*(n-1)/2场比赛,赢一场得1分.给出每个人最后的得分.求有多少个定义如下的strong king:赢了所有得分比自己高的人或本身就是分 ...

  5. python的socket网络编程(二)

    (注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 国庆八天假,已过去3天了,加上明天又是中秋,还是决定在今晚把之前想写的东西写完.国庆节在宁波老家,吃好喝好睡好,就是没有好好 ...

  6. Laravel 学习记录

    1.当配置  根目录没有指向/public 时 去掉www.blog.im/public 后的文件 需要把  public  文件夹里的..htaccess  文件放到 项目根目录.server.ph ...

  7. sift算法特征点如何匹配?

    https://www.zhihu.com/question/23371175 我需要把一张照片和训练集中的图片进行匹配.我把一张照片提取特征值并建立kd树,然后把训练集的图片依次读进来,然后把图片的 ...

  8. 一.复习GCC编译器的用法

    1.复习GCC编译器的用法 欲善其工,那么要先利其器.在这个C语言巩固与提高的阶段中,如果想要更好的达成预期目标,首先就要熟练掌握GCC编译器的用法.以下是GCC相关知识: GCC使用语法 gcc 选 ...

  9. 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 ...

  10. MAC OS X的命令行技巧

    ##透明度#降低透明度defaults write com.apple.universalaccess reduceTransparency -bool true#恢复默认透明度defaults wr ...