Как получить метатеги pwa, если для параметра html-webpack-plugin inject установлено значение false - Vue-CLI 3 - PullRequest
Новая
       39

Как получить метатеги pwa, если для параметра html-webpack-plugin inject установлено значение false - Vue-CLI 3

0 голосов
/ 03 октября 2018

Чтобы добавить пользовательские атрибуты в мои внедренные файлы js и css, я отключил автоматическое внедрение html-webpack-plugin и теперь использую переменные шаблона в моем html-индексе следующим образом:

vue.config.js 

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].inject = false
                return args
            })
    }
}

index.html 

<% for (key in htmlWebpackPlugin.files.css) { %><%
      if (htmlWebpackPlugin.files.cssIntegrity) { %>
    <link
      href="<%= htmlWebpackPlugin.files.css[key] %>"
      rel="stylesheet"
      integrity="<%= htmlWebpackPlugin.files.cssIntegrity[key] %>"
      crossorigin="<%= webpackConfig.output.crossOriginLoading %>" inline/><%
      } else { %>
    <link href="<%= htmlWebpackPlugin.files.css[key] %>" rel="stylesheet" inline/><%
      } %><%
    } %>

"inline" - пользовательский атрибут

Это работает как талисман при сборке!

Однако, я также использую плагин vue-pwa, который вставляет метатеги в мой HTML.

Это толькоработает, если я не использую vue-config, написанную выше.

Поэтому я предполагаю, что я должен быть в состоянии написать некоторые переменные шаблона в моем html, чтобы вставить эти метатеги.Но я не могу найти их в моем htmlWebpackPlugin объекте.

htmlWebpackPlugin 

{ 
    "files": 
    { 
        "publicPath": "/", 
        "chunks": { 
            "chunk-vendors": { 
                "size": 336283, 
                "entry": "/js/chunk-vendors.179bd184.js", 
                "hash": "ab293cabd5730c80c6f5", 
                "css": [] 
            }, 
            "app": { 
                "size": 36497, 
                "entry": "/js/app.0c33fe82.js", 
                "hash": "35e8bb77b896ceb1026b", 
                "css": ["/css/app.23b3a9ad.css"] 
            } 
        }, 
        "js": [
            "/js/chunk-vendors.179bd184.js", 
            "/js/app.0c33fe82.js"
        ], 
        "css": [
            "/css/app.23b3a9ad.css"
        ] 
    }, 
    "options": { 
        "template": "path\\to\\index.html", 
        "filename": "index.html", 
        "hash": false, 
        "inject": false, 
        "compile": true, 
        "favicon": false, 
        "minify": { 
            "removeComments": true, 
            "collapseWhitespace": true, 
            "removeAttributeQuotes": true, 
            "collapseBooleanAttributes": true, 
            "removeScriptTypeAttributes": true 
        }, 
        "cache": true, 
        "showErrors": true, 
        "chunks": "all", 
        "excludeChunks": [], 
        "chunksSortMode": "auto", 
        "meta": { }, 
        "title": "Webpack App", 
        "xhtml": false 
    } 
}

Они расположены в другом объекте, о котором я не знаю?Или я должен каким-то образом адаптировать свой vue-config.js, чтобы плагин все еще вставлял эти метатеги pwa?

...