Laravel 5.7 无法在刀片模板中使用带有 Vue 的资产答案

【问题标题】：Laravel 5.7 cant use assets with Vue in blade templateLaravel 5.7 无法在刀片模板中使用带有 Vue 的资产
【发布时间】：2019-06-26 19:03:51
【问题描述】：

您好，我有 Laravel 版本 5.7.24。我在将 app.js 导入刀片模板时遇到问题。我在resources/js/app.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 中看到，Laravel 删除了资产文件夹。所以我添加了 assets 文件夹，我的文件结构如下所示：

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

如何将 srcipt (resources/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（未找到）

【问题讨论】：

您是在app.js 中导入该组件吗？请分享文件resources/js/app.js
@BoussadjraBrahim 是的，我编辑了我的查询
public 文件夹中的 app.js 是您应该在刀片模板中使用的编译代码，您可以从 resources/aj/app.js 使用 npm run dev 或 npm run watch 生成它
没问题。您在代码中使用但未创建此组件可能有问题
@BoussadjraBrahim 我使用npm run watch。所以我应该从public 文件夹导入welcome.blade.php 脚本？

标签： laravel vue.js assets

【解决方案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

【讨论】：