使用 Vue 和 Laravel 的神秘问题？答案

【问题标题】：mysterious issue using Vue with Laravel?使用 Vue 和 Laravel 的神秘问题？
【发布时间】：2018-08-22 14:12:25
【问题描述】：

将 Laravel Homestead 与 Vagrant 结合使用，我刚刚创建了一个新的 laravel 项目。在新的 npm install 使用 vue 和 Laravel 附带的所有其他默认前端库期间，我收到以下警告：

npm WARN 已弃用 gulp-util@3.0.8: gulp-util 已弃用 - 替换它，遵循指南 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');

似乎是什么问题？

【问题讨论】：

也发布你的 package.json。
检查更新... laravel @devk 附带的默认值

标签： javascript laravel npm vue.js

【解决方案1】：

好的，所以我继续安装了一个新副本。我也遇到了同样的错误（除了我没有收到 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'
});

【讨论】：

是的，添加 .default 是解决方法...这个新后缀的目的是什么？
说实话，我不完全确定require(..)（ES6 之前的）语句是如何工作的。导出时可以导出多个变量，但也可以设置一个为默认值（所以你不需要做import {Component} from './somewhere，你可以做import Component from './somewhere'）。在我看来，require(..) 语句在识别默认导出时存在问题，您必须明确定义您正在导入默认导出。