vue-cli打包后dist文件运行空白和背景图显示问题详解

1.文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。

解决：到config文件夹中打开index.js文件。
assetsPublicPath属性作用是指定编译发布的根目录，‘/’指的是项目的根目录 ，’./’指的是当前目录。

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

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

    /**
     * Source Maps
     */

2.

vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

 

解决方法：只需要在build/utils.js文件中添加如下一行代码即可。 publicPath:'../../'




    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../',
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

 

更多参考 链接:https://www.cnblogs.com/aidixie/p/10102169.html

https://www.cnblogs.com/wanf/p/7871787.html

 

转载于:https://www.cnblogs.com/520BigBear/p/11421980.html