vue 運行時 + 編譯器 vs. 只包含運行時
https://cn.vuejs.org/v2/guide/installation.html#運行時-編譯器-vs-只包含運行時
文檔中的這個地方，說的不清楚
If you need to compile templates on the client (e.g. passing a string to the
templateoption, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build
這部分的意思是對於以下情況會用到compiler：
有指定template
沒指定template，也沒指定render（這時候使用的就是被掛載元素的outerHtml）
所以，沒有使用到compiler的情況只有：沒有指定template，但指定了render。 這種情況並沒有畫到vue的生命周期圖裏，真的不容易發現。
有時候我們會遇到這樣的錯誤：
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
以上提到，解決這個問題有兩種方式。到谷歌必應上搜索，99%的都選擇了後者，也就是使用全功能的vue（runtime+compiler），這個版本的vue文件相比僅包含runtime的版本體積要大，而且運行時的compile轉換會消耗性能，compile過程其實可以放到構建過程中進行。
總結就是：如果可以的話，盡量使用runtime版的vue文件。
以下演示一個簡單的runtime版vue項目 ：
項目初始化，前三個依賴是vue-loader的必備依賴
npm init -y && npm install --save-dev css-loader vue-loader vue-template-compiler vue
其余文件
// app.vue <style scoped> .title{ color:red; text-align: center; } </style> <template> <div class="title"> 這是標題 </div> </template> <script> alert("標題初始化") </script> // index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="root"> <app></app> </div> </body> <script src="bundle.js"></script> </html> // main.js import Vue from ‘vue‘ import app from ‘./app.vue‘ // new Vue({ // el:"#root", // render:function(c){ // return c("app") // }, // components:{ // app // } // }); // 兩種初始化方式都可以 new Vue(app).$mount("#root"); // webpack.config.js module.exports = { entry: { bundle: ‘./main.js‘ }, output: { filename: ‘bundle.js‘ }, module: { rules: [ { test: /\.vue$/, loader: ‘vue-loader‘ } ] }, resolve: { extensions: [".vue",".js",".json"], alias: { ‘vue$‘: ‘vue/dist/vue.runtime.js‘, } }, };
以上項目能正常運行。
compiler的作用在webpack引入 .vue文件的時候，就調用vue-loader來預處理過了，所以到了瀏覽器端運行的時候，僅僅引入vue.runtime就可以了
vue 運行時 + 編譯器 vs. 只包含運行時