Webpack+Vue-cli对vue项目进行打包_webpack和vue-cli是不是都可以打包-CSDN博客

本文链接：https://blog.csdn.net/liuhailong2014/article/details/90813509

本文详细介绍了使用Vue-cli脚手架创建的项目如何正确配置打包参数，包括修改utils.js中的publicPath属性，调整index.js里的assetsPublicPath属性，以及执行npm run build命令完成打包过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打包三部曲：

1、如果你是用Vue-cli脚手架创建的项目的话，找到项目目录中的 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属性了吗？改成'../../'，因为打包后的static文件夹和index.html同目录，而图片全都放在static文件夹下的img文件夹中了，当然这只是大一点的图片，小图片全都以base64的格式压缩在css文件中了，然后js文件全都放在static/js文件夹下了，所以，所有的css文件放在static/css文件夹下了，所以要在css文件中引用图片的话，图片引用路径必须是'../../'。

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: true,
    // 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'],

看到assetsPublicPath属性了吗？值设置成'./'，因为这个是要找到打包后的static文件夹，因为static和index.html同目录，所以要这么设置，现在大家应该懂了吧！！！

3、最后一步：在控制台输入命令，npm run build

大功告成！