记录下自己VUE项目用Hbuider打包后启动白屏问题
刚用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打包后启动白屏问题的更多相关文章
- Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)
最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- vue项目使用hbuilder打包后,真机测试白屏
在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an ...
- 记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题
做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前 用IONIC时打包的APP也是 在IOS下有300毫秒延迟问题.所以 只能 认吧. 安装fastclick 插件: npm in ...
- Vue项目创建build打包后可修改的配置文件
需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置. 实现方法如下: 1.在项目的static目录下创建project.config.json文件(名称随意,建 ...
- vue项目用webpack打包后跨域问题
在app.js的最开始加上 app.all('*', (req, res, next) => { res.header("Access-Control-Allow-Origin&quo ...
- vue项目在webpack打包后背景图片显示不了
加上 publicPath:'../../'即可
- (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 ...
- 在vue项目npm run build后,index.html中引入css和js 报MIME type问题
问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...
随机推荐
- 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- python 文件重命名
将文件夹中的.jsp重命名为.html import os def rename(path): files = os.listdir(path) for file in files: dir = os ...
- WTForms
一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install wtforms 用户登录简例: fr ...
- rabbitMq交换机direct、topics
一: direct 上面我用采用了广播的模式进行消息的发送,现在我们采用路由的方式对不同的消息进行过滤 发送端代码 public class RoutingSendDirect { private s ...
- Rsync使用方法
Rsync是一款开源.快速.多功能.可实现全量及增量的本地或者远程数据同步的优秀工具.并且支持多系统平台运行.Rsync具有本地与远程两台主机之间的数据快速复制同步镜像.远程备份等功能,该功能类似sc ...
- [dart学习]第一篇:windows下安装配置dart编译环境,写出helloworld
前言 博主非科班出身,平时多用C语言,最近想了解学习一门第二语言,看上了可用于移动开发的目前还小众一点dart,准备用一段比较长的时间来慢慢学习.理解. 关于dart语言不再详细介绍了,大家可以访问 ...
- leetCode 字符串相关问题
125. 验证回文串 /* * 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. * 输入: "A man, a plan, a canal: Panama& ...
- Weekly Contest 119
第一题: 973. K Closest Points to Origin We have a list of points on the plane. Find the K closest poi ...
- 【mac微信小助手】WeChatPlugin使用教程!
微信小助手 mac版集微信防撤回和微信多开等诸多功能于一身,可以有效的阻止朋友微信撤回消息,还能开启无手机验证登录,再也不用每次登录扫码验证啦,非常方便! wechatplugin mac版安装教 ...
- kubernets 概念
理解 Kubernetes 对象 各种资源对象的理解和定义 Kubernetes 中 Pod 的选举过程