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.

轉載來源：https://blog.csdn.net/xiaomajia029/article/details/88320233

 

 

問題描述：

原因分析：

在項目配置的時候，默認 npm 包導出的是運行時構建，即 runtime 版本，不支持編譯 template 模板。

vue 在初始化項目配置的時候，有兩個運行環境配置的版本：Compiler 版本、Runtime 版本。

其主要區別在於：

1. Compiler 版本：

可以對 template 模板內容進行編譯（包括字符串模板和可以綁定的 html 對象作為模板），例如：

1.  
   new Vue({
2.  
   el: "#box",
3.  
   template: "<div>{{msg}}</div>",
4.  
   data: {
5.  
   msg: "hello"
6.  
   }
7.  
   });

1. Runtime 版本：

使用 vue-loader 加載.vue 文件（組件文件）時，webpack 在打包過程中對模板進行了渲染。

 

解決方法

修改配置文件中的 vue 引用

一、 vue cli 2.x

找到 webpack.base.conf.js 文件，修改以下配置：

在 webpack.base.conf.js 配置文件中多加了一段代碼，將 vue/dist/ package.json 配置文件的"main": "dist/vue.runtime.common.js",改為引用代碼中的引用 vue/dist.vue.esm.js 文件，意思就是說 webpack.base.conf.js 這個文件已經將 vue/dist.package.json 的錯誤引用糾正成 vue/dist.vue.esm.js

1.  
   // ...
2.  
   const config = {
3.  
   // ...
4.  
   resolve: {
5.  
   extensions: [".js", ".vue", ".json"],
6.  
   alias: {
7.  
   vue$: "vue/dist/vue.esm.js",
8.  
   "@": resolve("src")
9.  
   }
10.  
    }
11.  
    };

二、 vue cli 3.x

修改項目根目錄中的配置文件：vue.config.js，具體代碼如下：

修改 vue_cli3.0 的配置文件，添加 配置文件：vue.config.js 在項目的根目錄下,目的是修改在引入 vue 時，不要采用 runtime 形式的文件,而采用 dist/vue.esm.js 形式文件

1.  
   // ...
2.  
    
3.  
   module.exports = {
4.  
   // ...
5.  
    
6.  
   configureWebpack: config => {
7.  
   config.resolve = {
8.  
   extensions: [".js", ".vue", ".json", ".css"],
9.  
   alias: {
10.  
    vue$: "vue/dist/vue.esm.js",
11.  
    "@": resolve("src")
12.  
    }
13.  
    };
14.  
    }
15.  
     
16.  
    // ...
17.  
    };

【划重點】 

發現了一個新的方法，只需要添加一行代碼的配置，即可實現支持template編譯：

1.  
   // vue.config.js
2.  
    
3.  
   module.exports = {
4.  
   runtimeCompiler: true,
5.  
   }