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

最新推荐文章于 2023-05-24 17:45:29 发布

原创最新推荐文章于 2023-05-24 17:45:29 发布 · 3.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #打包 #index.heml #空白

Web前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个常见的Vue项目打包后页面显示空白的问题及其解决办法。问题源于config/index.js中build配置的assetsPublicPath默认设置为'/'，导致资源路径错误。将该属性修改为'./'，使路径变为相对路径，即可正确加载资源。

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

问题原因：
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: '/',
    ...
}

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

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

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