Vue CLI "index. html" content - PullRequest
Новая
       19

Vue CLI "index. html" content

0 голосов
/ 19 января 2020

всякий раз, когда я запускаю npm run build, он генерирует папку dist с моим приложением, все хорошо, но ..

Моя проблема:

Когда я открываю index.html, появляются <!DOCTYPE>, <head>, <body> теги но в моем случае мне просто нужны <div id="app"> с файлами CSS и JS.

Вопрос:

Можно ли удалить теги, которые мне не нужно генерировать как в моем случае <!DOCTYPE>, <body>, <head>?

Всякий раз, когда я запускаю npm run build, это должно выглядеть так, когда я открываю index.html: 

<link href=/testing/path/css/app.6878f4f8.css rel=preload as=style>
<link href=/testing/path/js/app.457dc9d3.js rel=preload as=script>
<link href=/testing/path/js/chunk-vendors.a0cfb1f1.js rel=preload as=script>
<link href=/testing/path/css/app.6878f4f8.css rel=stylesheet>
 <div id=app>
 </div>
<script src=/testing/path/js/chunk-vendors.a0cfb1f1.js></script>
<script src=/testing/path/js/app.457dc9d3.js></script>

В противном случае мне нужно открыть файл и удалить это вручную

1 Ответ

0 голосов
/ 20 января 2020

Vue Сгенерированные в CLI проекты используют public/index.html в качестве шаблона, который содержит заголовки и теги, которые вы хотели бы избежать. Единственный элемент, необходимый для Vue, - это <div id="app"></div>, поэтому вы можете удалить все, кроме этого, из public/index.html.

Обратите внимание, что preload, * 1010 Плагины * и CSS (по умолчанию включены) вставят <head>. Вы можете отключить плагины preload и prefetch с помощью этой конфигурации: 

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')
  }
}

Окончательный вывод будет выглядеть примерно так: 

<head><link href=/css/app.e2713bb0.css rel=stylesheet></head>
<div id=app></div>
<script src=/js/chunk-vendors.327f60f7.js></script>
<script src=/js/app.fb8740dd.js></script>
...