将 Laravel Homestead 与 Vagrant 结合使用，我刚刚生成了一个新的 Laravel 项目。在使用 vue 和 Laravel 附带的所有其他默认前端库的全新 npm install 期间，我收到以下警告:
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
最初我没有考虑这个警告，但在快速设置默认脚手架 Vue 示例环境 Laravel 附带并在浏览器中运行应用程序后，我收到以下控制台错误:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <ExampleComponent>
<Root>
HTML
<!doctype html>
<html class="en" lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
</html>
APP.JS
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
PACKAGE.JSON
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"vue": "^2.5.7"
}
}
Laravel-Mix JS
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
似乎是什么问题？
最佳答案
好的，所以我继续并安装了一个新副本。我得到了同样的错误(除了我没有收到 gulp 弃用通知，所以这可能是您在全局范围内安装的东西)。
根据 this answer然后我在 app.js 中的 require 语句之后添加了 .default 并且它开始工作:
...
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
...
而且由于 require(..) 是 ES6 之前的版本，我建议改用 ES6 语法:
import Vue from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
window.Vue = Vue;
Vue.component('example-component', ExampleComponent);
const app = new Vue({
el: '#app'
});
关于javascript - 使用 Vue 和 Laravel 的神秘问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49271125/