Vue Cli 报错：You are using the runtime-only build of Vue where the template compiler is not availabl

版权声明：本文为博主原创文章 转载请附上博文链接 https://blog.csdn.net/weixin_41791279/article/details/87936892

报错原因： 

这里引用的是vue.runtime.esm.js，造成的不能正常运行。

vue-cli 2.x 解决方法：

在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。

resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
     }
   },

vue-cli 3.x 解决方法：

对照cli2X，修改vue_cli3.0的配置文件，添加 配置文件：vue.config.js 在项目的根目录下,目的是修改在引入vue时，不要采用runtime形式的文件,而采用 dist/vue.esm.js形式文件，将这段代码复制粘贴到vue,config.js中

const path = require('path')
function resolve (dir) {
    return path.join(__dirname,dir)
  }
   
module.exports = {
   
    configureWebpack: config => {
        config.resolve = {
           extensions: ['.js', '.vue', '.json',".css"],
            alias: {
              'vue$': 'vue/dist/vue.esm.js',
              '@': resolve('src'),
            }
        }
    },
}

 

 重启服务，刷新，正常显示