记录一个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'
}),

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
            }
          }
        ]
      })
  },

或者

chainWebpack: config => {
    config.plugins.delete('preload-search')
    config
      .plugin('html-search')
      .tap(args => {
        args[0].minify.removeAttributeQuotes = false
        return args
      })
}

反正我怎么试都不行,不知道他们是怎么弄的,报"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;
    });
},

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

Logo

前往低代码交流专区

更多推荐