Vue的compiler模式和runtime模式

我在自行使用webpack搭建單頁面應用框架時，引入了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.複製代碼

main.js代碼以下：

import Vue from 'vue';import App from './App.vue';
new Vue({    
    el: "#app",    
    template: '<App/>',    
    component: {App}
});複製代碼

下面一塊兒來分析下出錯的緣由和解決辦法。

vue有兩種形式的代碼 compiler（模板）模式和 runtime 模式（運行時），vue模塊的package.json的main字段默認爲runtime模式， 指向了"dist/vue.runtime.common.js"位置。

而在main.js文件中，初始化vue使用的是compiler模式，因此就會出現上面的錯誤信息。

解決辦法一

將main.js初始化vue使用runtime模式，以下：

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app")複製代碼

解決辦法二

webpack配置文件裏有個別名配置，以下：

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' //內部爲正則表達式  vue結尾的
    }
}複製代碼

也就是說，import Vue from ‘vue’ 這行代碼被解析爲 import Vue from ‘vue/dist/vue.esm.js’，直接指定了文件的位置，沒有使用main字段默認的文件位置。即把配置文件別名配置修改成：

configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' 
      }
    }
}複製代碼

解決辦法三

那就是在引用vue時，直接寫成以下便可：

import Vue from 'vue/dist/vue.esm.js'複製代碼

總結，學習就是要不斷採坑，同時也是在不斷提高本身。

查看完整代碼，詳見個人倉庫=>衝鴨！