VUE中index.html什么时候加载的mainjs呢

本文解析了Vue项目中index.html与main.js的关系及配置方式。通过分析项目结构,详细解释了如何通过npm run dev命令启动项目,并说明了入口文件main.js是如何被加载执行的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天突然思考到一个问题,index.html文件中是vue项目的主页,项目入口,那么mainjs是啥时候被index加载运行的呢?是怎么被运行的呢?

1.先来看看vue项目的一个结构解析(非常感谢磊阿磊阿磊磊磊的图片)

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

App.vue---根组件

main.js---入口文件

2.通过2张图片搞清楚index和mainjs的关系和配置

很明显看得出,mainjs中是配置了咱们的页面该渲染在index中的app节点上的,但是vue项目访问最开始的文件是index.html,这中间mainjs是如何被indexhtml引用的呢?

3.最后在package.json看到了配置

如果你是用vue.js官网提供的脚手架工具并沿用默认配置的话,
你执行npm run dev的时候会出来页面,
是因为你根目录下的package.json文件里script配置了

"dev": "node build/dev-server.js",

也就是其实执行的是dev-server.js这个文件,里面有定义 

var webpackConfig = require('./webpack.dev.conf');

 因为我们这个脚手架工具里是用webpack来打包项目文件的,依赖的webpack.dev.conf文件里又定义了

var baseWebpackConfig = require('./webpack.base.conf');

在这个依赖webpack.base.conf文件里面entry入口文件就配置了

app: './src/main.js'

所以当你运行npm run dev的时候就从main.js这个入口文件开始执行了

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值