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