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

Posted 2021-11-22 huzhuhua

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