Content of "index.html" in Vue CLI

Question

Content of "index.html" in Vue CLI

Every time I execute npm run build, it creates a dist folder containing my app - all well and good, but...

Issue at Hand:

Upon opening my index.html, I find the

<!DOCTYPE>, <head>, <body>

tags, whereas in my case, all I really need is the <div id="app"> with the CSS and JS files.

Query:

Is there a way to omit the unnecessary tags that are being generated, such as

<!DOCTYPE>, <body>, <head>

in my specific scenario?

When I run npm run build, I would like the resulting index.html to look like this:

<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>

Otherwise, I have to manually edit the file every time.

javascript vue.js vue-cli-3

Answer 1

Answer №1

When working with Vue CLI generated projects, the public/index.html file serves as a template that includes headers and tags you may want to avoid. The only essential element for Vue in this file is <div id="app"></div>, so it's safe to remove everything else from public/index.html.

It's worth noting that the preload, prefetch, and CSS plugins (which are enabled by default) will automatically insert a <head> section. If you wish to disable the preload and prefetch plugins, you can do so using the following configuration:

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

After making these changes, your final HTML output will resemble the following:

<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>

Answer 2

When working with Vue CLI generated projects, the public/index.html file serves as a template that includes headers and tags you may want to avoid. The only essential element for Vue in this file is <div id="app"></div>, so it's safe to remove everything else from public/index.html.

It's worth noting that the preload, prefetch, and CSS plugins (which are enabled by default) will automatically insert a <head> section. If you wish to disable the preload and prefetch plugins, you can do so using the following configuration:

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

After making these changes, your final HTML output will resemble the following:

<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>

Content of "index.html" in Vue CLI

Answer №1

Similar questions

The scrolling event on the div is not triggering

Personalizing the display of Vuetify pagination controls

employing a flexible array of gulp operations in run-sequence

What is the process for creating an input configuration file for the function?

tips for sending a chosen item to the Vujes API

Using ngFor in Angular 6 to create a table with rowspan functionality

The Firefox extension is experiencing an issue with loading moment.js before chart.js

The process of displaying custom number buttons on the correct input field in react.js

Every time I try to install create-react-app, I keep encountering a frustrating 'network Socket timeout' error

Issue with JQuery on Mobile Devices: Troubles with Dropdown Menu and Loading Function

The Gatsby and React navigator

Load the page using AJAX and automatically scroll to the anchor within the loaded content

Tips for implementing an active class for td within jQuery tabs?

Exploring the world of Vue and Nuxt: delving into the depths

Upon refreshing the page, an inline script was not executed due to its violation of the Content Security Policy directive: "script-src 'self'"

Using ANT to swap out values in JavaScript code

Steps to completely eliminate all elements from an object using specific keys

Why is there empty white space showing in the select option drop down, even though the data is being bound correctly

Vue.js - dynamically applying CSS classes based on conditions

Having trouble with importing files from a different folder in a React Typescript project