今天突然思考到一個問題,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這個入口文件開始執行了