Question

您好，我有Laravel版本5.7.24。我有进口app.js到刀片模板问题。我有app.js在resources/js/app.js，此相同的文件是其它位置：public/js/app.js

在welcome.blade.php我添加：

<body>
    <div id="app">
        Hello
        <example-component></example-component>
        <articles></articles>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

我创建在物品部件resources/js/components/articles.vue：

<template>
    <div>
        Hello
    </div>
</template>

<script>
export default {
    name: "Articles"
}
</script>

现在Laravel回报我的错误：

未知的自定义元素：-您是否注册了组件正确吗？对于递归组件，请确保提供“名称” 选项。

因为asset是指public/js/app.js

我阅读本article，taht Laravel除去资产foler。所以我添加了Assets文件夹，我的文件结构如下所示：

但Laravel仍引用文件public/js/app.js。

如何将srcipt（资源/js/app.js）导入到我的welcome.blade.php文件中？

编辑：

我的resources/js/app.js文件：

require('./bootstrap');
window.Vue = require('vue');

Vue.component('articles', require('./components/Articles.vue').default);

const app = new Vue({
    el: '#app'
});

当我从welcome.blade.php中更改脚本时：

<script src="{{ asset('js/app.js') }}"></script>

到

<script src="{{ asset('assets/js/app.js') }}"></script>

我遇到错误：GET http://127.0.0.1:8000/assets/js/app.js net :: ERR_ABORTED 404（未找到）

Answer 1

看来您在app.js的这一行中有一个错误：

Vue.component('articles', require('./components/Articles.vue').default);

尝试移除.default从这里，看看当再次构建组件被正确地注册（npm run dev）。

边注：<articles>应包含像连字符my-articles，v-articles，或别的东西

直接在DOM中使用组件时（相对于字符串而言）   模板或单个文件组件），我们强烈建议以下   W3C的自定义标记名称规则（全部小写，必须包含一个   连字号）。这可以帮助您避免与当前和将来的HTML发生冲突   元素。

https://vuejs.org/v2/guide/components-registration.html#Component-Names

Laravel 5.7不能在刀片模板中使用带有Vue的资产

1 个答案: