Vue项目打包问题解决

作者博客：漂小泊的博客
作者主站：小泊随記
原文地址：文章地址

---

很多同学在Vue项目打包的时候遇到了一些问题，今天说两个常见问题的解决方法。

问题描述

1、背景图片

项目打包后，背景图片引用失败。

找到build文件夹下的utils.js,修改如下位置：

    // 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)
    }

将“publicPath”修改为“../../”

2、文件加载失败

项目打包后，文件路径出错。

找到config文件夹下的index.js文件修改如下位置：

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

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

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

将“assetsPublicPath”修改为“./”

联系小泊

email：643209899@qq.com