有兩種構(gòu)建方式，獨(dú)立構(gòu)建和運(yùn)行構(gòu)建。它們的區(qū)別在于前者包含模板編譯器而后者不包含。

模板編譯器：模板編譯器的職責(zé)是將模板字符串編譯為純 JavaScript 的渲染函數(shù)。如果你想要在組件中使用 template 選項(xiàng)，你就需要編譯器。

模板字符串： template。Vue字符串模板 。el上提供一個(gè)在頁(yè)面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)?？梢允?CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例。

獨(dú)立構(gòu)建： 獨(dú)立構(gòu)建包含模板編譯器并支持 template 選項(xiàng)。 它也依賴于瀏覽器的接口的存在，所以你不能使用它來(lái)為服務(wù)器端渲染。

運(yùn)行構(gòu)建： 運(yùn)行時(shí)構(gòu)建不包含模板編譯器，因此不支持 template 選項(xiàng)，只能用 render 選項(xiàng)，但即使使用運(yùn)行時(shí)構(gòu)建，在單文件組件中也依然可以寫(xiě)模板，因?yàn)閱挝募M件的模板會(huì)在構(gòu)建時(shí)預(yù)編譯為 render 函數(shù)。所以運(yùn)行時(shí)構(gòu)建比獨(dú)立構(gòu)建要輕量30%。

template：一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì) 替換 掛載的元素。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā) slot。

render：字符串模板的代替方案，允許你發(fā)揮 JavaScript 最大的編程能力。render 函數(shù)接收一個(gè) createElement 方法作為第一個(gè)參數(shù)用來(lái)創(chuàng)建 VNode。

Vue.js 的官方教程上是這么說(shuō)的：

• 獨(dú)立構(gòu)建包括編譯和支持 template 選項(xiàng)。 它也依賴于瀏覽器的接口的存在，所以你不能使用它來(lái)為服務(wù)器端渲染。
• 運(yùn)行時(shí)構(gòu)建不包括模板編譯，不支持 template 選項(xiàng)。運(yùn)行時(shí)構(gòu)建，可以用 render 選項(xiàng)，但它只在單文件組件中起作用，因?yàn)閱挝募M件的模板是在構(gòu)建時(shí)預(yù)編譯到 render 函數(shù)中，運(yùn)行時(shí)構(gòu)建只有獨(dú)立構(gòu)建大小的 30%，只有 16Kb min+gzip 大小。

Vue.js 的運(yùn)行過(guò)程實(shí)際上包含兩步。

• 第一步，編譯器將字符串模板（template）編譯為渲染函數(shù)（render），稱之為編譯過(guò)程；(編譯)
• 第二步，運(yùn)行時(shí)實(shí)際調(diào)用編譯的渲染函數(shù)，稱之為運(yùn)行過(guò)程。（調(diào)用）

Vue.js 為什么存在獨(dú)立構(gòu)建和運(yùn)行構(gòu)建這兩種構(gòu)建模式？

由于 Vue.js 1.0 的編譯過(guò)程需要依賴瀏覽器的 DOM，所以無(wú)法（或者說(shuō)沒(méi)有意義）將編譯器和運(yùn)行時(shí)分開(kāi)。因此在 Vue.js 1.0 分發(fā)包中，編譯器和運(yùn)行時(shí)是打包在一起，都在瀏覽器端執(zhí)行。

然而到了 Vue.js 2.0，為了支持服務(wù)端渲染（server-side rendering），編譯器不能依賴于 DOM，所以必須將編譯器和運(yùn)行時(shí)分開(kāi)。

這就形成了獨(dú)立構(gòu)建（編譯器 + 運(yùn)行時(shí)）和運(yùn)行時(shí)構(gòu)建（僅運(yùn)行時(shí)）。
顯而易見(jiàn)，運(yùn)行時(shí)構(gòu)建要小于獨(dú)立構(gòu)建。

在現(xiàn)代前端工程構(gòu)建中，通常會(huì)使用 vue-loader 和 vueify 預(yù)編譯模板。在這種情況下，只需要打包運(yùn)行時(shí)，而不需要打包編譯器，運(yùn)行時(shí)構(gòu)建即可滿足所需。

當(dāng)然，如果你需要在前端使用 template 選項(xiàng)實(shí)時(shí)編譯模板，那么還是需要使用獨(dú)立構(gòu)建將編譯器發(fā)送到瀏覽器。

總結(jié)：

一、獨(dú)立構(gòu)建包含模板編譯器，運(yùn)行時(shí)構(gòu)建不包含模板編譯器。
二、模板編譯器的作用就是將template選項(xiàng)編譯成render函數(shù)，render函數(shù)是渲染的關(guān)鍵。
三、鑒于以上兩點(diǎn)，使用運(yùn)行時(shí)構(gòu)建時(shí)，不能出現(xiàn)template選項(xiàng)，因?yàn)榇藭r(shí)沒(méi)有模板編譯器。但是有一種情況除外：即webpack+vue-loader情況下單文件組件中出現(xiàn)template是可以的。
四、使用vue-cli生成項(xiàng)目時(shí)，會(huì)提醒使用哪種構(gòu)建方式，npm包默認(rèn)導(dǎo)出的是運(yùn)行時(shí)構(gòu)建，如果需要使用獨(dú)立構(gòu)建，需要在webpack中配置alias
五、目前暫時(shí)發(fā)現(xiàn)的兩者的應(yīng)用場(chǎng)景上的區(qū)別有

* 一、需要注意Vue實(shí)例化時(shí)的方式，運(yùn)行時(shí)構(gòu)建方式下實(shí)例化Vue時(shí)，不要出現(xiàn)template屬性。
* 二、index.html中不要出現(xiàn)template或者是通過(guò)vue-router渲染的route-view 。
* 三、以上區(qū)別討論的場(chǎng)景均為使用webpack+vue-loader單文件組件下，其他的區(qū)別暫時(shí)未發(fā)現(xiàn)。

反正就是兩種不同的構(gòu)建模式。可以適用與前后臺(tái)而已。
前端構(gòu)建前：獨(dú)立構(gòu)建可以在客戶端執(zhí)行，而運(yùn)行時(shí)構(gòu)建不支持template的編譯器，所以不可以執(zhí)行。
后端構(gòu)建前：獨(dú)立構(gòu)建可以在不可以在客戶端執(zhí)行，因?yàn)橛芯幾g器，而運(yùn)行時(shí)構(gòu)建就可以執(zhí)行。
構(gòu)建后：構(gòu)建后的文件都成為render渲染了，所以都可以執(zhí)行。