Vue CLI - объединить выходные данные сборки в один HTML-файл - PullRequest
Новая
       0

Vue CLI - объединить выходные данные сборки в один HTML-файл

2 голосов
/ 07 октября 2019

У меня есть проект vue, созданный с помощью vue-cli. Обычный вывод при запуске yarn build - это папка dist с index.html и подкаталогом js и css с соответствующими файлами .js и .css.

Я хочусоздать вывод в виде одного html-файла, содержащего js и css.

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

module.exports = {
    css: {
        extract: false,
    },
    configureWebpack: {
      optimization: {
        splitChunks: false
      }
    }
  }

По сути, я хочу, чтобы мой html-файл был примерно таким: 

<html lang=en>
    <head>
        ... meta tags
        <title>my title</title>
    </head>
    <body>
        <div id=app></div>
        <script>
           // contents of the output js file here
        </script>
    </body>
</html>

Возможно ли это?

Использование Vue 3.9.3

1 Ответ

0 голосов
/ 09 октября 2019

Кто-то ответил предложением посмотреть html-webpack-inline-source-plugin , но удалил свой ответ. Но это было именно то, что мне было нужно, чтобы сделать это.

Плагин не специфичен для Vue или Vue-CLI, но работает, если вы выполните следующее:

1) Добавьте vue.config.jsфайл в корне приложения.

2) Связанный плагин выше фактически является расширением другого пакета. Вам нужны оба. 

npm install --save-dev html-webpack-plugin 
npm install --save-dev html-webpack-inline-source-plugin

3) 

// vue.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
    css: {
        extract: false,
    },
    configureWebpack: {
      optimization: {
        splitChunks: false // makes there only be 1 js file - leftover from earlier attempts but doesn't hurt
      },
      plugins: [
        new HtmlWebpackPlugin({
          filename: 'output.html', // the output file name that will be created
          template: 'src/output-template.html', // this is important - a template file to use for insertion
          inlineSource: '.(js|css)$' // embed all javascript and css inline
        }),
        new HtmlWebpackInlineSourcePlugin()
      ]
    }
  }

4) Добавить шаблон. Это необходимо для работы в контексте Vue, поскольку без этого выходной html-файл по умолчанию не будет иметь необходимого <div id="app"></div>, а Vue не будет монтироваться ни к чему. Я взял обычный html-файл и немного его изменил. 

<!-- output-template.html -->
<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,initial-scale=1">        
        <title>example title</title>
    </head>
    <body><noscript><strong>We're sorry but my example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
        <div id=app>

        </div>
        <!-- plugin will insert js here by default -->
    </body>
</html>

Затем соберите как обычно, и файл output.html будет в папке /dist

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...