如何从资源文件夹动态加载资产到公用文件夹并使用asset（）助手访问它们答案

【问题标题】：how to load assets dynamically from resources folder to public folder and access them using asset() helper如何从资源文件夹动态加载资产到公用文件夹并使用asset（）助手访问它们
【发布时间】：2021-06-26 13:25:03
【问题描述】：

我刚刚安装了 laravel 8.x，当我尝试进入登录页面时，会显示有关加载 CSS 或 js 等文件的错误，但只有位于资源文件夹中的文件，有些人建议将它们从资源文件夹复制到公用文件夹，但这对我来说没有任何意义，所以我正在寻找一种方法，可以将文件加载到公用文件夹，就像 laravel 对其他文件（例如视图）所做的那样文件

这是我访问文件的方式

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

我的 webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

【问题讨论】：

你能把你的控制器和web.php路由贴出来
我没有遇到问题，登录和所有其他页面都呈现得很好，但没有样式
样式属于boostrap css而不是js
这只是一个例子兄弟仔细阅读问题，我会再重复一遍问题是样式或js都没有加载
你是否运行了这个命令npm run watch 如果你这样做了然后view-source:chrome 并检查文件是否已加载，你可以发布你的webpack.mix.js

标签： laravel laravel-helper

【解决方案1】：

在您的webpack.mix.js 中添加以下代码

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue().postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

最后，您应该在应用程序的主布局模板中引用您的样式表。许多应用程序选择将此模板存储在 resources/views/layouts/app.blade.php 中。此外，请确保添加响应式视口元标记（如果它尚不存在）：

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/css/app.css" rel="stylesheet">
</head>

还有像belwo这样的js

你可以在这里阅读https://laravel.com/docs/8.x/mix#postcss

【讨论】：