vue项目打包后打开index.html页面显示空白问题

博主终于完成了自己的demo项目，到了打包这一步。通过npm run build命令打包后会在项目文件中生成一个名为dist的文件夹，里面是打包后的项目文件和资源。但是，打开index.html文件后却显示一片空白，打开控制台还会发现有报错，找不到页面路径。

1. 问题原因：
   config文件夹下index.js中的build命令的配置有一个属性叫assetsPublicPath，默认为 assetsPublicPath：' / '，意思是根目录，这时会从index.html所在的硬盘的根目录下开始查找，自然无法找到。

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...
}

2. 解决办法：
   改为assetsPublicPath：' ./ '，这时就不再是绝对路径的根目录了，而是改为了相对路径，同目录下进行查找。

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    ...
}

重新打包项目，index.html就显示正常了。