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

首先是在config/index.js里面

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', /**
* Source Maps
*/ productionSourceMap: true, devtool: '#source-map', productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
assetsPublicPath我确实也改为了相对路径"./",
然后在自己配置路由里面。
const router = new VueRouter({
mode: "history",//这个有问题,要改为hash
routes: routers
});

网上说mode不能为history。

百度了下这两个区别,

history: 依赖 HTML5 History API 和服务器配置。

hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。

两个在PC上运行时没什么 区别,但是改为hash后打包后就可以了,没白屏了。

 

记录下自己VUE项目用Hbuider打包后启动白屏问题的更多相关文章

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

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

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

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

  3. vue项目使用hbuilder打包后,真机测试白屏

    在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an ...

  4. 记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题

    做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前 用IONIC时打包的APP也是 在IOS下有300毫秒延迟问题.所以 只能 认吧. 安装fastclick 插件: npm in ...

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

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

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

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

  7. vue项目在webpack打包后背景图片显示不了

    加上 publicPath:'../../'即可

  8. (Android)react-native-splash-screen实践-解决react-native打包好后启动白屏的问题

    1.安装 npm i react-native-splash-screen --save or yarn add react-native-splash-screen --save 2.自动配置 re ...

  9. 在vue项目npm run build后,index.html中引入css和js 报MIME type问题

    问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...

随机推荐

  1. nginx安装SSL证书,并强制跳转https访问

    网站最初是nginx代理80端口,实现http访问的.现在要安装SSL证书,使用https访问. 我的nginx根目录是/usr/local/nginx,将申请的SSL证书和key放在/usr/loc ...

  2. Vue系列之 => webpack结合vue使用

    安装 npm i vue -S ,  在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...

  3. 使用PHP实现RSA算法的加密和解密

    本文提供使用RSA算法加密解密数据的PHP程序类(签名和验签的实现方式可以查看使用PHP实现RSA算法的签名和验签 这篇文章),封装了格式化公钥和私钥文件的方法,这样无论使用什么格式的公钥或者私钥都可 ...

  4. pycharm2018安装教程 pycharm2018永久激活教程

    安装教程 下载pycharm 2018.3.2安装文件,可以直接点击下载网盘下载 激活码地址:http://demo.liuy88.cn/jp0876.html 下载完成后,双击exe即可开始安装 点 ...

  5. 如何查看视图的sql语句

    select text from syscomments s1 join sysobjects s2 on s1.id=s2.id where name='视图名称'前提条件是视图没有被加密,有权限

  6. 在windows+eclipse+git遇到的未修改文件被标记为已修改的问题

    最近遇到2个具体的问题: 1.我们有个工程里面有几个外部jar包,这几个jar包经常会更新,更新的时候如果是在eclipse中执行的,由于windows文件机制,所以会报错无法覆盖这几个jar包.虽然 ...

  7. 操作mongodb

    MongoDB数据库是以k-v形式存储在磁盘上的. import pymongoclient = pymongo.MongoClient(host='10.29.3.40',port=27017)db ...

  8. Django 中 form 介绍

    目录 Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用 ...

  9. self sqflite sample =======================

    import 'package:path_provider/path_provider.dart'; import 'dart:async'; import 'package:flutter/mate ...

  10. 细数Linux的文件权限

    普通权限 普通权限使用ls -l查看,最前面显示的即是,如: # ls -l .txt -rw-r--r-- 1 root root 8338 7月 19 20:27 1.txt 权限介绍: -/d/ ...