【052】Failed to mount component: template or render function not defined. 错误的解决方法

Vue.js 2 遇到 vue.runtime.common.js?d43f:511 [Vue warn]: Failed to mount component: template or render function not defined. (found in root instance) 错误的解决方法。问题描述：先说一下每个文件的内容

zhangchao19890805

148447人浏览 · 2016-11-27 23:18:01

zhangchao19890805 · 2016-11-27 23:18:01 发布

Vue.js 2 遇到 vue.runtime.common.js?d43f:511 [Vue warn]: Failed to mount component: template or render function not defined. (found in root instance) 错误的解决方法。

问题描述

先说一下每个文件的内容。

package.json：

{
  "name": "test-typeof-vue",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --port 28080 --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "devDependencies": {
    "babel-core": "6.18.2",
    "babel-loader": "6.2.8",
    "babel-preset-es2015": "6.18.0",
    "cross-env": "3.1.3",
    "css-loader": "0.26.0",
    "file-loader": "0.9.0",
    "style-loader": "0.13.1",
    "vue-loader": "9.9.5",
    "webpack": "2.1.0-beta.27",
    "webpack-dev-server": "2.1.0-beta.11"
  },
  "dependencies": {
    "vue": "2.1.3"
  }
}

webpack.config.js：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
          test: /\.css$/,
          use: [
              {
                  loader: 'style-loader'
              }, {
                  loader: 'css-loader'
              }
          ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
         test: /\.js$/,
         loader: 'babel-loader',
         exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map',
  plugins: [
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>bmsclient</title>
    
        
  </head>
  <body>
    <div id="app"></div>
    <h1>aaaaaaaaaaaaaaaaaaaa</h1>

    <script src="/dist/build.js"></script>
  </body>
</html>

main.js：

import Vue from "vue";
new Vue({
    el: "#app"
});

最后在命令行项目文件夹下执行命令 npm run dev, 服务器可以正常启动，但是浏览器的控制台打印错误信息：

vue.runtime.common.js?d43f:511 [Vue warn]: Failed to mount component: template or render function not defined.
(found in root instance)

解决方法

import Vue from “vue”; 默认引入的文件是 vue/dist/vue.runtime.common.js。这个读者可以在node_modules/vue/package.json文件里面查到。package文件的main选项指定了默认执行的文件。关键的package.json代码如下：

"name": "vue",
"version": "2.1.3",
"description": "Reactive, component-oriented view layer for modern web interfaces.",
"main": "dist/vue.runtime.common.js",

读者可以在github上阅读vue.js 2.1.3的文档。文档位置在vue/dist/README.md。这个文档说明了 vue.runtime.common.js 文件不含编译器，因此不支持template选项。我们使用Webpack和template选项的话，可以使用vue.common.js文件。vue.common.js文件包含编译器。所以main.js中把

import Vue from "vue";

改写成

import Vue from "vue/dist/vue.common.js";

就可以了。而且可以正常使用 vue 文件。

下面是在上面的代码基础上，加上的使用vue文件的例子：

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> <title>bmsclient</title>
  </head>
  <body>
    <div id="app">
      <hello></hello>
    </div>
    <h1>aaaaaaaaaaaaaaaaaaaa</h1>
    <script src="/dist/build.js"></script>
  </body>
</html>

main.js

import Vue from "vue/dist/vue.common.js";
import hello from "./hello.vue"
new Vue({
    el: "#app",
    components:{
        hello
    }
});

hello.vue

<template>
  <div>
    <h1>Hello</h1>
    <span>{{zca}}</span>
  </div>
</template>
<script>
export default {
  data:function(){
    return {
      zca: "zca"
    }
  },
  mounted:function() {
  }
}
</script>

<style>
</style>