根據錯誤提示說明，和搜索之后得出結論：是項目引入的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）

總結

以上是生活随笔為你收集整理的[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。