webpack 安裝vue（兩種代碼模式compiler 和runtime）

使用webpack安裝vue，import之后，運營項目報錯，如下：

[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.

原因：

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

這是vue升級2.0之后就有的特點；如果main.js中，初始化vue這樣寫，這種形式compiler模式，所以就會出現上面的錯誤信息；

new Vue({
    el:'#app',
    template:'<App/>',
    components:{App}
});

解決辦法：

1 修改Vue實例的寫法：

new Vue({
　　render:h=>h(App)
}).$mount('#app')；

 

 

用vue-cli搭建的項目沒有問題，原因是webpack配置文件中有個別名配置：

resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' //內部為正則表達式 vue結尾的 } }

也就是說import Vue from 'vue' 這行代碼被解析為import Vue from ‘vue/dist/vue.esm.js’,直接指定了文件的位置，沒有使用main字段默認的文件位置

在vue-cli3中需要配置：

configureWebpack: { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }

或者直接這樣寫：

import Vue from 'vue/dist/vue.esm.js

 

來自：https://blog.csdn.net/wxl1555/article/details/83187647