vue创建的时候没有index.html文件

我看到许多博客中都说vue创建的时候有index.html文件,一直以来我创建的项目都没有这个文件,只有main.js和App.vue,是vue版本的问题吗,还是脚手架的问题

Vue CLI 脚手架在创建项目时默认会生成一个 public/index.html 文件作为项目的模板文件,但是这并不是必需的,你完全可以手动创建一个空的 index.html 文件,然后在 main.js 中引入 Vue 并将其挂载到这个文件中。

如果你使用的是较新的版本的 Vue CLI(如 3.x 或 4.x),那么这个模板文件可能已经被移动到了一个名为 public/index.html 的目录下,而不是在项目根目录下。如果你使用的是旧版本的 Vue CLI(如 2.x),那么在创建项目时会在项目根目录下生成一个 index.html 文件。

因此,如果你创建的 Vue 项目中没有 index.html 文件,可能是因为你使用的是较新的版本的 Vue CLI,或者你在创建项目时手动删除了这个文件。但是,缺少这个文件并不会影响 Vue 项目的正常运行,因为 Vue CLI 默认会将 Webpack 的输出文件注入到 HTML 模板中,并在运行时自动创建一个虚拟的 HTML 文件。

应该在public文件夹下

有没有可能人家说的是public文件夹的index

  • 给你找了一篇非常好的博客,你可以看看是否有帮助,链接:解决Vue入口文件index.html缓存问题
  • 除此之外, 这篇博客: Vue项目入口文件main.js和App.vue和index.html之间的关系中的 1、在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  •  

    index.html---主页,项目入口

    App.vue---根组件

    main.js---入口文件

    那么这几个文件之间的联系如何呢?

    1.先看index.html中的内容:(为了很好的标识各个文件,我对各文件进行了文字标记)

    2.在App.vue中,我做了如下处理:

    3.在main.js中,文件初始内容如图:

    那么我们打开的网页如何呢?

    网页效果如下:

    也就是说,在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。(但是需要注意的是,在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分)

    那么,我们就可以来分析上述的逻辑了,浏览器访问项目,最先访问的是index.html文件,

    而index.html中

    1

    <div id="app">来自index.html正文中的内容</div>

     上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上

     main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,在Vue实例中,通过

    new Vue({
    
    el: '#app',
    
    //components: {App },
    
    //template: '<App/>'
    
    })

    告诉该实例要挂载的地方;(即实例装载到index.html中的位置)

    接着,实例中注册了一个局部组件App,这个局部组件App来自于哪儿呢?

     
    import App from './App.vue'
    
    new Vue({
    
    //el: '#app',
    
    components: {App },
    
    //template: '<App/>'
    
    })

    这个局部组件是当前目录下的App.vue;

    而起模板是什么呢?模板就是组件App.vue中的template中的内容。(template会替代原来的的挂载点处的内容)

     所以Vue这个实例就是展示的是App.vue这个组件的内容

     所以,我们进行总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

    而index.html中的Title部分不会被取代,所以会一直保留。