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

记录一个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;才是关键！
最后附上小站地址 ：毒蘑菇配色

最后

以上就是疯狂奇异果为你收集整理的解决vue项目打包后index.html标签属性没有双引号的问题的全部内容，希望文章能够帮你解决解决vue项目打包后index.html标签属性没有双引号的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。