vue開發的項目，前端寫的.vue文件中的生命周期方法，線上還存在嗎？

瀏覽器本身是不能識別.vue後綴的文件的是吧，我默認它只識別.html先，我又知道，vue是一個純前端的開發框架，那麼我們本地寫好的vue項目，在執行npm run build之後，全部打包到dist文件夾當中，然後將dist文件夾中的內容放到伺服器上，本地用瀏覽器訪問伺服器時候，是如何使得展現在瀏覽器中的頁面的邏輯跟開發時候的一致的？ 比如我們開發時候在mounted方法中寫道 頁面mounted之後就alert（『頁面mounted了』），本地開發調試好，打包到dist 上傳到伺服器，用瀏覽器訪問，瀏覽器中成功alert了，為什麼？？ 瀏覽器不認識mounted這個方法的吧，它怎麼知道這行代碼在什麼時間執行？？

文檔和源碼是人類最好的老師。——魯迅

瀉藥。

隨著前端工程化、自動化的深入，代碼一步步的被推進了黑盒子。也許幾年之後，前端代碼是怎樣運行的會成為另一門「計算機系統」課程吧。

個人覺得題主的問題可以分成兩部分：

• .vue文件是如何被編譯的
• vue代碼是如何運行的

從.vue到.js

你在開發時，通常會執行下面的代碼：

npm run dev


node中的npm模塊會在package.json中尋找dev對應的script：

{
...
"scripts": {
...
"dev": "NODE_ENV=develop node build/dev-server.js"
}
}


執行script，通過webpack編譯.vue，並開啟了一個本地伺服器，主要的編譯配置如下：

module.exports = {
entry: {
// 編譯入口，會從這裡索引依賴樹
},
output: {
// 編譯結果輸出在哪裡
},
module: {
// 經過了哪些loader處理
rules: [
{
test: /.vue$/,
loader: "vue-loader",
}
]
}
}


vue-loader會通過正則匹配import進來的vue文件：

import Hello from "HelloComponent.vue" // .vue可以省略


vue-loader會解析.vue文件中的代碼塊，默認有三塊：

&
...
&