根据错误提示说明,和搜索之后得出结论:是项目引入的vue编译版本不对
解决方案1
build/webpack.base.conf.js 并设置vue的alias别名,如下:
1 2 3 4 5 | resolve: { alias: { vue: 'vue/dist/vue.esm.js' } } |
解决方案2
打开src/main.js修改Vue对象初始化。
1 2 3 4 5 6 | new Vue({ el: '#app' , router, components: { App }, template: '<App/>' }) |
改为
1 2 3 4 5 | new Vue({ el: '#app' , router, render: h => h(App) }) |
原因是,使用 template属性,需要引入带编译器的完整版的vue.esm.js
而如果在.vue文件里面使用
1 2 3 4 5 6 7 8 9 10 11 | <template> <div></div> </template> <script> export default { name: 'name1' , data() { return {}; } }; </script> |
这种形式,然后使用import引入,则不需要完整版的vue.esm.js,因为使用vue-loader时 *.vue文件会自动预编译成js。
其实vuejs官网中已有明确说明
对不同构建版本的解释(https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A)