Laravel 5.3.10 + Vue.js 2.0.1上的“无法安装组件"错误 [英] "Failed to mount component” error on Laravel 5.3.10 + Vue.js 2.0.1
问题描述
我一直在研究Laravel +Vue.js.
我想在Laravel Blade模板上开发Vue组件，
但是当我尝试执行此操作时，发生了以下错误，并且无法正常运行.
*为了进行检查，我只编写了最少的Vue组件代码.
I have been working on Laravel + Vue.js.
I would like to develop Vue components onto Laravel Blade template,
but when I tried doing that, the following error occured, and it doesn’t work well.
* For the purpose of checking, I have just written only a minimal code of Vue components.
参考以下文章，我尝试了各种方法.
https://github.com/vuejs/vue-loader/issues/287
I tried various things in reference to the following articles.
https://github.com/vuejs/vue-loader/issues/287
正在发生的问题和错误消息
The problem which is occuring and the error message
[Vue warn]: Failed to mount component: template or render function not defined. (found in anonymous component - use the "name" option for better debugging messages.)
index.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script src="js/bundle.js"></script>
</body>
</html>
app.js
import Vue from 'vue'
import InputText from './components/InputText.vue'
new Vue({
render(h) {
return h(InputText)
}
}).$mount('#app')
InputText.vue
<template>
<input class="input-text" type="text">
</template>
<script>
export default {
}
</script>
<style lang="sass" scoped>
</style>
gulp.file.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(mix => {
mix.sass('**/*.scss')
.webpack('')
});
webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: {
bundle: './resources/assets/js/app.js',
},
output: {
filename: '[name].js',
},
resolve: {
root: __dirname,
extensions: ['', '.js', '.vue'],
modulesDirectories: ['node_modules'],
alias: {
vue: 'vue/dist/vue.js',
},
},
module: {
loaders: [
{
test: /\.vue?$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
},
{
test: /\.html$/,
loader: 'vue-html',
},
{
test: /\.(jpg|png)$/,
loader: 'url-loader?limit=10000',
},
],
},
vue: {
loaders: {
scss: 'style!css!sass',
},
},
};
package.json
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.6",
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.6",
"vue": "^2.0.1",
"vue-loader": "^9.5.1",
"webpack": "^1.13.2"
...
}
补充信息
Laravel 5.3.10
Node.js 6.4.0
npm 3.9.3
complementary information
Laravel 5.3.10
Node.js 6.4.0
npm 3.9.3
推荐答案
在webpack.config.js中vue下loaders旁边的loaders旁边添加esModule: true，您应该会很好.
Add esModule: true next to loaders under vue in your webpack.config.js and you should be good to go.
或者，您可以使用const Vue = require('vue')而不是import Vue from 'vue'，它会尝试从组件中从生成的模块加载default导出，并且除非您告诉vue-loader生成兼容的，否则无法这样做代码.
Alternatively you may use const Vue = require('vue') instead of import Vue from 'vue' which tries to load the default export from the generated module from your component, and it is unable to do so, unless you tell the vue-loader to generate compatible code.
实际上，这是规范之间的更普遍的不兼容，其中export default foo并不表示与module.exports = foo相同.当您使用require前者时，它将为您提供一个对象{ default: foo }，而后者将返回未封装的foo.
Actually it is a more general incompatibility between the specs, where export default foo doesn't mean the same as module.exports = foo. When you require the former, it will give you an object { default: foo } whereas the latter will return foo unencapsulated.
这就是为什么您必须告诉vue-loader是否使用任何一种规范.
That's why you have to tell vue-loader if you are using either of the specs.
这篇关于Laravel 5.3.10 + Vue.js 2.0.1上的“无法安装组件"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
