Как указать, куда вставлять чанки в html-шаблон с помощью vue-cli? - PullRequest
Новая
       13

Как указать, куда вставлять чанки в html-шаблон с помощью vue-cli?

0 голосов
/ 26 мая 2019

Я использую проект, сгенерированный vue-cli, и указал pages в vue.config.js. Vue автоматически вставляет фрагменты JS в конец файла шаблона HTML. Но мне нужно указать другое место, чтобы поместить их в этот файл.

Стандартный синтаксис Webpack не очень помогает (<%= htmlWebpackPlugin ...). Он на самом деле вставляет фрагменты туда, но затем фрагменты снова вставляются в конец страницы.

Есть ли правильный способ, как указать точное место в файле HTML для сборки с помощью vue-cli вместо конца файла по умолчанию (или до того, которого нет в моем шаблоне)?

Шаблон (IndexTemplate.cshtml) 

...

<scripts-section>
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
    <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script><% } %>

</scripts-section>

Созданный файл (Index.cshtml) 

...

<scripts-section>
    <script src="/dist/vue/runtime.js"></script>
    <script src="/dist/vue/sentry.vendor.js"></script>
    <script src="/dist/vue/axios.vendor.js"></script>
    <script src="/dist/vue/vue.vendor.js"></script>
    <script src="/dist/vue/vendors~Search.js"></script>
    <script src="/dist/vue/Search.js"></script>

</scripts-section>

<script type="text/javascript" src="/dist/vue/runtime.js"></script><script type="text/javascript" src="/dist/vue/sentry.vendor.js"></script><script type="text/javascript" src="/dist/vue/axios.vendor.js"></script><script type="text/javascript" src="/dist/vue/vue.vendor.js"></script><script type="text/javascript" src="/dist/vue/vendors~Search.js"></script><script type="text/javascript" src="/dist/vue/Search.js"></script>

Как видите, он вставляется дважды. Иметь его в конце файла здесь не вариант.

vue.config.js 

module.exports = {
    publicPath: '/dist/vue/',
    outputDir: './wwwroot/dist/vue/',
    runtimeCompiler: true,
    pages: {
        Search: {
            entry: 'Frontend/vue/Search/main.ts',
            template: 'Views/Mentors/IndexTemplate.cshtml',
            filename: '../../../Views/Mentors/Index.cshtml',
            chunks: ['runtime', 'vue.vendor', 'axios.vendor', 'sentry.vendor', 'Search', 'vendors~Search']
        }
    },
    chainWebpack: config => {
        config.optimization
            .runtimeChunk('single')
            .splitChunks({
                chunks: 'all',
                cacheGroups: {
                    vue: {
                        test: /[\\/]node_modules[\\/](.*vue.*)[\\/]/,
                        name: 'vue.vendor',
                        chunks: 'all',
                    },
                    // ...
                }
            });
    }
}

Я ожидаю, что фрагменты JS будут внедрены только в элемент <scripts-section>.

...