Question

我有一个使用vue-cli编译的vue应用程序。我的vue.config.js文件如下所示：

property

我想让webpack为它生成的每个脚本标签添加'use strict'; module.exports = { publicPath: `${process.env.CDN_URL || ''}/dist/`, lintOnSave: true, transpileDependencies: [], outputDir: '.tmp/dist', pages: { navigator: { entry: 'vue/home/main.ts', template: 'views/home/index.ejs', // Will output to dist/views/home/index.ejs filename: 'views/home/index.ejs', }, }, chainWebpack(config) { // Override the default loader for html-webpack-plugin so that it does not fallback to ejs-loader. // ejs-loader will use ejs syntax against the template file to inject dynamic values before html-webpack-plugin runs config.module .rule('ejs') .test(/\.ejs$/) .use('html') .loader('html-loader'); }, };。我看到webpack有一个nonce="<%= nonce %>"变量，但是我尝试在vue.config.js文件的许多部分进行设置。我尝试将其添加到chainWebpack（）和configWebpack（）中。我尝试将其添加到vue / home / main.ts文件中。似乎没有任何作用。如何将随机数属性添加到脚本标签？

这是vue 2.6.x和vue cli 4.5.x

Answer 1

一种解决方案是将script-ext-html-webpack-plugin添加到webpack.prod.conf文件（或您自己的Webpack配置文件）的插件列表中。

new ScriptExtHtmlWebpackPlugin({
  custom: {
    test: /\.js$/, // adjust this regex based on your demand
    attribute: 'nonce',
    value: '<%= nonce %>'
  }
}),

Answer 2

我最终编写了自己的webpack插件，因为用例比script-ext-html-webpack-plugin所支持的要复杂一些。我需要o作为标题标签，${nonce}作为正文标签。我的插件代码是一个简单且基于@Sphinx提到的script-ext-html-webpack-plugin

<%= nonce %>

更新后的vue.config.js文件如下所示：

const HtmlWebpackPlugin = require('html-webpack-plugin');

class AddNonceToScriptTagsWebpackPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(this.constructor.name, (compilation) => {
      const alterAssetTagGroups = compilation.hooks.htmlWebpackPluginAlterAssetTags || HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups;
      alterAssetTagGroups.tap(this.constructor.name, (data) => {
        data.head = this._addNonceAttribute(data.head || []);
        data.body = this._addNonceAttribute(data.body || []);

        return data;
      });
    });
  }

  _addNonceAttribute(tags) {
    return tags.map((tag) => {
      if (tag.tagName === 'script') {
        tag.attributes = tag.attributes || {};
        tag.attributes.nonce = '<%= nonce %>';
      } else if (tag.tagName === 'link' && tag.attributes && tag.attributes.as === 'script') {
        tag.attributes = tag.attributes || {};
        // eslint-disable-next-line no-template-curly-in-string
        tag.attributes.nonce = '${nonce}';
      }

      return tag;
    });
  }
}

如何配置vue应用程序（使用vue-cli）以将nonce属性添加到生成的脚本标签？

2 个答案: