問(wèn)題描述：

image.png

原因分析：

在項(xiàng)目配置的時(shí)候，默認(rèn) npm 包導(dǎo)出的是運(yùn)行時(shí)構(gòu)建，即 runtime 版本，不支持編譯 template 模板。

vue 在初始化項(xiàng)目配置的時(shí)候，有兩個(gè)運(yùn)行環(huán)境配置的版本：Compiler 版本、Runtime 版本。其主要區(qū)別在于：

• Compiler 版本：
  可以對(duì) template 模板內(nèi)容進(jìn)行編譯（包括字符串模板和可以綁定的 html 對(duì)象作為模板），例如：

new Vue({
  el: "#box",
  template: "<div>{{msg}}</div>",
  data: {
    msg: "hello"
  }
});

• Runtime 版本：
  使用 vue-loader 加載.vue 文件（組件文件）時(shí)，webpack 在打包過(guò)程中對(duì)模板進(jìn)行了渲染。

解決方法

修改配置文件中的 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 文件，意思就是說(shuō) webpack.base.conf.js 這個(gè)文件已經(jīng)將 vue/dist.package.json 的錯(cuò)誤引用糾正成 vue/dist.vue.esm.js

// ...
const config = {
  // ...
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@": resolve("src")
    }
  }
};

• vue cli 3.x
  修改項(xiàng)目根目錄中的配置文件：vue.config.js，具體代碼如下：
  修改 vue_cli3.0 的配置文件，添加 配置文件：vue.config.js 在項(xiàng)目的根目錄下,目的是修改在引入 vue 時(shí)，不要采用 runtime 形式的文件,而采用 dist/vue.esm.js 形式文件

// ...
 
module.exports = {
  // ...
 
  configureWebpack: config => {
    config.resolve = {
      extensions: [".js", ".vue", ".json", ".css"],
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": resolve("src")
      }
    };
  }
 
  // ...
};

• 【劃重點(diǎn)】
  發(fā)現(xiàn)了一個(gè)新的方法，只需要添加一行代碼的配置，即可實(shí)現(xiàn)支持template編譯：

// vue.config.js
module.exports = {
  runtimeCompiler: true,
}

原文鏈接：https://blog.csdn.net/xiaomajia029/article/details/88320233