如何从资源文件夹动态加载资产到公用文件夹并使用asset（）助手访问它们
Posted
技术标签:
【中文标题】如何从资源文件夹动态加载资产到公用文件夹并使用asset（）助手访问它们【英文标题】：how to load assets dynamically from resources folder to public folder and access them using asset() helper 【发布时间】：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
【参考方案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
【讨论】：
以上是关于如何从资源文件夹动态加载资产到公用文件夹并使用asset（）助手访问它们的主要内容，如果未能解决你的问题，请参考以下文章
如何显示和加载 iOS 应用程序资源/资产文件夹中的音频文件？
从 Android 动态功能模块将资产加载到 WebView