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

时间:2023-01-12 03:50:51

刚用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后打包后就可以了,没白屏了。