当前位置:   article > 正文

解决vue项目打包后index.html标签属性没有双引号的问题_removeattributequotes

removeattributequotes

记录一个vue项目打包时的大坑,因为需要在index.html里加入一些自定义的东西,结果打包后相关属性都没有双引号,最后各种百度谷歌终于解决了,哈哈(我用的vue-cli4)

vue-cli4配置和低于4的配置有些不同,4只用一个vue.config.js基本就行了

1.百度上搜索的有些人这么解决的(vue-cli4以下)

找到webpack.prod.conf.js文件,加上removeAttributeQuotes: false;

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        // true会缺少引号
        removeAttributeQuotes: false
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // 解决打包公用代码没有添加进去
      chunks: ['manifest', 'vendor', 'app'],
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
}),
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

2.百度上搜索的有些人这么解决的(vue-cli4)

在vue.config.js参照下面这么修改(这个vue.config.js应该知道怎么弄的吧)

chainWebpack: config => {
    config.plugins.delete('preload-search')
    config
      .plugin('html-search')
      .tap(args => {
        return [
          {
            preload: false,
            title: packageJson.description,
            template: __dirname + '/public/search.html',
            minify: {
              removeAttributeQuotes: false
            }
          }
        ]
      })
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

或者

chainWebpack: config => {
    config.plugins.delete('preload-search')
    config
      .plugin('html-search')
      .tap(args => {
        args[0].minify.removeAttributeQuotes = false
        return args
      })
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

反正我怎么试都不行,不知道他们是怎么弄的,报"html-search"有问题

3.我是这么修改的(vue-cli4)

经过一番查看,发现人家vue-cli4以下的都没有见过这个"html-search"这个插件,大家都用的"html"就行了,不知道vue-cli4可以不,结果试了试居然可以,哈哈

chainWebpack: config => {
    config.resolve.alias
    .set('@', resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components'))
    .set('@c', resolve('src/components'));
    config.plugins.delete('prefetch');
    config.plugins.delete('preload-search');
    //解决打包head里标签属性没有双引号
    config.plugin('html')
    .tap(args => {
        args[0].minify.removeAttributeQuotes = false;
        return args;
    });
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

反正思路就是这样,removeAttributeQuotes = false;才是关键!
最后附上小站地址 :毒蘑菇配色

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/258803
推荐阅读
相关标签
  

闽ICP备14008679号