Vue 2 无法挂载组件
Posted
技术标签:
【中文标题】Vue 2 无法挂载组件【英文标题】：Vue 2 Failed to mount component 【发布时间】：2017-03-31 11:23:15 【问题描述】：我正在使用 Laravel 5.2 和 Vue 2.0.6。如果我使用本地组件，它工作正常。但是当我尝试使用另一个 .vue 文件中的全局组件时，它会显示以下错误：
[Vue warn]: Failed to mount component: template or render function not defined. (found in component <test> at path\to\site\resources\assets\blog\components\test.vue)
Test.vue
<template>
<div>
<h1 class="hello">Hello</h1>
</div>
</template>
<style>
.hello
color:blue;
</style>
<script>
export default
</script>
App.js
var Vue = require('vue');
var resource = require('vue-resource');
window.Vue = Vue;
Vue.use(resource);
Vue.component('test', require('../components/test.vue'));
new Vue(
el: '#app'
);
Gulpfile.js
var gulp = require('gulp');
var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('laravel-elixir-webpack-official');
var blogResourcePath = './resources/assets/blog';
var blogPublicPath = 'public/blog-assets';
elixir(function(mix)
mix.webpack('app.js', blogPublicPath + '/js', blogResourcePath + '/js')
);
Webpack.config.js
'use strict';
const path = require('path');
module.exports =
module:
loaders: [
test: /\.js$/,
include: path.join(__dirname, 'resources/assets'),
exclude: /node_modules/,
loader: 'babel',
,
test: /\.vue$/,
loader: 'vue',
,
test: /\.css$/,
loader: 'style!css'
,
]
,
resolve:
alias:
vue: 'vue/dist/vue.js',
;
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<test></test>
</div>
<script type="text/javascript" src=" elixir('blog-assets/js/app.js') ">
</html>
没有编译错误。 here 有一个类似的问题，但这并不能解决我的问题。
【问题讨论】：
可能是因为你注册为my-component，但使用为我猜这是因为使用 Vue2.0，默认版本是没有模板解析器的版本。需要按如下方式导入Vue：
import Vue from 'vue/dist/vue.js'
请在此处查看 LinusBorg 的答案：
https://forum-archive.vuejs.org/topic/4399/vue-2-0-vue-warn-failed-to-mount-component-template-or-render-function-not-defined-found-in-root-instance/6
【讨论】：
我知道并且根据安装指南 (vuejs.org/v2/guide/…) 我在 webpack 配置中添加了别名（检查我的 webpack.config.js）。它正在工作，因为本地组件正在工作。但是当它来自另一个 .vue 文件的全局组件时，就会发生错误。 不知道丢失的$是否与此有关：'vue$': 'vue/dist/vue.js'
添加并编译但没有改变任何东西。
老实说，我迷路了。我感觉肯定有一些运动部件发生故障。您是否尝试过将其构建为独立应用程序，不使用 laravel-elixir gulp 插件，然后从那里继续？
经过2-3天的尝试，我也觉得其他一些地方可能有问题。我删除了 .vue 文件并将全局组件放入 .js 文件中。这很有效，但似乎并不完美。无论如何，非常感谢您调查此问题。以上是关于Vue 2 无法挂载组件的主要内容，如果未能解决你的问题，请参考以下文章