webpack+vue的匹配报错

Question

webpack+vue匹配的报这个模板错误是怎么回事?

package.json

"vue": "^2.0.1",
"vue-cli": "^2.4.0",
"vue-html-loader": "^1.2.3",
"vue-loader": "^9.5.1",
"vue-style-loader": "^1.0.0",

vue.common.js:2569 [Vue warn]: Failed to mount component: template or render function not defined

Answer 1

Google找到了问题所在是：Vue2.0有两种Build的方式：the standalone build and the runtime-only build（独立构建和运行时构建）,可以知道：独立构建包括编译和支持template选项。但也要依赖于浏览器的API，所以不能用于服务端渲染。运行时构建不包括模板编译，并且不支持template选项，只能使用render选项。

重点来了，默认情况下，NPM包导出的是runtime-only build.因此为了要使用独立构建，在webpack配置中需要添加下面的代码：

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.js'
  }
}

于是乎，按照官方文档的说法，在webpack配置中加入上面那段代码之后，就不报错了，不过我的页面还是一片空白:<
实在没办法继续Google，然后在Github看到了这个issue里面的LinusBorg的评论，在index.js文件这里,只能使用下列两种情况：

• 使用template属性例如：template: '<div><modal> ... </modal></div>

• 使用render() function

因此，通过测试，可以直接使用template: '<div><modal> ... </modal></div>来加载对应的内容，组件的话，则需使用render function来注册子组件。
修改之后的index.js文件应该是这样：

var Vue = require('vue');

import App from './vue/app';

new Vue({
  el: '.show',
  render: (createElement) => createElement(App)
});

你试试。

本人愚见（错误请指出）：特别注意一点在入口js文件这里，是无法使用components属性来注册子组件的，而在组件中则可以使用components属性来注册子组件。如果在你的App.vue中，使用components属性来注册子组件的话是可以注册成功的。这是vue2.0才会出现的问题，如果是1.0是不会出现这个问题的。

Answer 2

在没有vue1的经验下使用vue2 和 vue-router2，并强行撸 vue + vue-router + webpack 会遇到这种问题

下面来说下排除问题的方法。

首页请确定node_module里面的vue 和 vue-router都为2.0+版本

第二是webpakc.config.js的设置 alias指明具体路径

resolve: {
        extensions: ['', '.js', '.css', '.scss','.vue'],
        alias: {
            'vue$': './node_modules/vue/dist/vue.js'
        }
    }

第三就是router初始化的问题，一般下面这段代码会在入口文件，例如main.js里面

import Vue from 'vue'
import Router from 'vue-router'

import app from './src/components/app.vue'
import list from './src/components/list.vue'

Vue.use(Router);

const router = new Router({
    routes: [{
        path: '/',
        component: app
    }, {
        path: '/:id',
        component: list
    }]
})
const vm = new Vue({
    router
}).$mount('#app')

在以上三步骤确认的情况下，再来说报错的问题。报错最大的问题在于，初始Router时，传入对象属性routes的设置，路径所对的组件component："这里面的内容是错误的"，所以请先改成下面方式测试，而并不是强行从vue文件里面import出内容（因为有可能你处理vue文件的依赖模块都没安装全）

const router = new Router({
        routes: [{
            path: '/',
            component: { template: '<div>home</div>' }
        }, {
            path: '/bar',
            component: { template: '<div>bar</div>' }
        }]
    })

Answer 3

vuejs包含两种使用方式，standalone和runtime-only，runtime-only不包含template编译，你可以参考官方文档

Answer 4

我也遇到这个问题了，昨天还是好好的，项目全部重新配置也不行，而且用了.vue文件做组件的时候，webpack打包还提示v-for这个标签语法错误，现在npm都默认安装的vue2.0，也不知道什么情况，就是最简单的一个hello world都出不来了，Failed to mount component，这个错误

Answer 5

我也遇到了，后面发现vue版本太高了，安装1.0.x的版本就OK

Answer 6

vue.js 1.0 和 vue.js 2.0 有些语法有变化，要使用2.0的话，得去看看有变化的地方。

Answer 7

只给出引用库信息，就能定位到问题了？
在哪出错，出错代码都不贴，题主这问题抛的。。。

Answer 8

我也遇见了这种情况，是vue版本的问题。浏览器报错如下：

package.json是这样的，可以看到vue的版本是2.0.3

修改下vue的版本，我改成了1.0.18的版本，然后 npm install会安装这个版本

最后webpack一下。搞定。希望对各位有用。

Answer 9

@byronlun 正解！