博主终于完成了自己的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: '/',
    ...
}
  1. 解决办法:
    改为assetsPublicPath:' ./ ',这时就不再是绝对路径的根目录了,而是改为了相对路径,同目录下进行查找。
 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

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

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

Logo

前往低代码交流专区

更多推荐