Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题

577 阅读1分钟

问题描述:使用vue-cli脚手架工具生成的vue项目,使用npm run build后生成的文件直接双击打开白屏一片。

解决方案:

  • 第一步:修改build文件夹下utils.js,在以下位置加入

      if (options.extract) {
        return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader',
          //用于解决build后静态文件路径找不到的问题(新加的代码)
          publicPath: '../'
        })
      } else {
        return ['vue-style-loader'].concat(loaders)
      }
    
  • 第二步:修改config文件夹下的index.js文件,在以下位置进行修改,注意是build对象中:

      build: {
      // Template for index.html
      index: path.resolve(__dirname, '../dist/index.html'),
    
      // Paths
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      //用于解决build后文件路径找不到的问题(修改为./)
      assetsPublicPath: './',