None of the resources I've read about Vue attempt to explain how a Vue application is launched. There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The ment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
None of the resources I've read about Vue attempt to explain how a Vue application is launched. There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The ment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
Share Improve this question asked Jan 7, 2020 at 16:33 Dean SchulzeDean Schulze 10.3k25 gold badges116 silver badges181 bronze badges 1-
1
That's because it is actually used by a webpack plugin for the final build: as per documentation, "The file
public/index.htmlis a template that will be processed with html-webpack-plugin. During build, asset links will be injected automatically." – Terry Commented Jan 7, 2020 at 16:38
1 Answer
Reset to default 4The Vue Cli handles the injection when you are developing locally as your run mand will be something like npm run serve for default configurations.
When you get round to putting the code into production you'll end up running a different mand npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.
See the Vue Cli website for more details.