[vuejs/vue-cli]如何关闭html自动去除空格的功能？

原本以为在chainWebpack里这样写可以解决问题，但好像没有用？

config.plugin('html').tap(args => {
  args[0].minify={
    collapseWhitespace=false
  }
  return args
});

请问vue-cli对html的空格压缩是怎么实现的？

chainWebpack

alianggitok

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(([options]) => {
      options.minify.collapseWhitespace = false
      return [options]
    })
  }
}

试过了，这么写是可以的，如果不行的话，请提供一个重现项目。

jkzing

感谢及时回复，不过试了下会报错，console.log(options.minify) 返回undefined，项目配置基本是vue-cli默认配置

module.exports = {
  lintOnSave: false,
  runtimeCompiler:true,
  productionSourceMap:false,
  devServer: devServer,
  configureWebpack: config => {
    webpackConfig.base(config);
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      webpackConfig.production(config);
    } else {
      // 为开发环境修改配置...
      webpackConfig.development(config);
    }

  },
  chainWebpack: config => {
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');

    config.resolve.alias.set('@', resolve('src'))
      .set('html2canvas', resolve('public/static/js/html2canvas.min.js'))
      .set('element-ui', resolve('src/element'));

    // config.plugin('html').tap(args => {
    //   console.log('xxxxxxxxxxxxx', Object.keys(args[0]), args.length)
    //   args[0].minify=false
    //   return args
    // });
  }
}

webpack.base:

module.exports = function(config){
  config.module.rules.push({
    test: resolve('jquery'),
    use: [
      { loader: 'expose-loader', options: 'jQuery' },
      { loader: 'expose-loader', options: '$' }
    ]
  });
  config.plugins.push(new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  }));
  config.optimization = {
    runtimeChunk:'single',
    // namedModules: true,
    // namedChunks: true,
    splitChunks: {
      chunks: 'all',
      name: true,
      minSize: 0,
      minChunks: 1,
      // maxAsyncRequests:3,
      // maxInitialRequests:2,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: 0
        },
        common: {
          name: "common",
          minChunks: 2,
          priority: -1,
          reuseExistingChunk: true
        }
      }
    }
  }
}

webpack.development:

module.exports = function(config){
  // 为开发环境修改配置...
  config.performance = {
    hints: 'warning'
  };
}

alianggitok

请提供重现项目。

sodatea

我很抱歉，暂时不便上传项目，可以的话请看楼上贴出配置代码片段，希望提供方案或思路，感谢

alianggitok

可以另起一个新项目，从头配置一遍，看看有没有这个问题。如果没有问题的话请排查你自定义的这些配置。

sodatea

我甚至尝试删除了configureWebpack项，chainWebpack里config.plugins.delete('html');，都没有起效，就想知道vue-cli是用啥来实现自动去除空格这一功能的

alianggitok

解决问题的第一步是让我们能够重现，所以请使用 Vue CLI 创建一个新项目，配置后让它“无法自动去除空格”，然后把链接 PO 出来。

你的情况大概率不是 Vue CLI 的问题，针对特定项目中的问题，可以通过论坛、StackOverflow 或者 Discord 聊天室等途径寻求帮助。

jkzing

配置直接报错了

config.plugin('html').tap(args => {
      // 修改它的选项...
      return args
})

> vue-cli-service build

⠋  Building for production...[]
 ERROR  TypeError: Cannot read property '__expression' of undefined
TypeError: Cannot read property '__expression' of undefined

yutent

多页面这样会报错,单个页面入口需要

config.plugin('html-你的页面名称').tap(([options]) => {
            options.minify.collapseWhitespace = false
            return [options]
 })

或者循环你的pages

Object.keys(pages).forEach(entryName => {
      config.plugin(`html-${entryName}`).tap(([options]) => {
        options.minify.collapseWhitespace = false
        return [options]
      })
    });

thusbrook

多页面骨架屏注入时有这个问题,按照这个办法解决了,感谢~~~

antqi

[vuejs/vue-cli]如何关闭html自动去除空格的功能？

回答