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

问题描述：使用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: './',复制代码

转载于:https://juejin.im/post/5bdab7cfe51d45330e5dd3ac