Laravel 5.5中如何从resources文件夹引入JS文件并解决404问题

我来帮你搞定这个问题！首先得搞清楚为啥直接引用resources目录下的JS文件会报404：

Laravel的web服务器根目录是public文件夹，浏览器只能请求这个目录下的静态资源，resources属于应用的源码目录，是对外不可直接访问的，所以你直接通过URL引用它肯定找不到文件，移到public就能正常访问也是这个道理。

不过你想把JS文件留在resources目录完全没问题，只需要用Laravel官方的资源编译工具（Vite或者Mix）把它编译到public目录就行，下面分两种常用情况给你步骤：

方式一：用Vite（Laravel 9及以上版本默认） #

这个是现在Laravel的主流方案，步骤很简单：

1. 先确认你的admin_app.js确实在resources/assets/admin_js/路径下
2. 打开项目根目录的vite.config.js，把你的JS文件添加到入口配置里：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/assets/admin_js/admin_app.js', // 把你的JS路径加在这里
            ],
            refresh: true,
        }),
    ],
});

3. 打开终端运行编译命令：

# 开发环境用这个，会实时监听文件变化自动编译
npm run dev

# 上线前用这个，会压缩优化文件
npm run build

编译完之后，Vite会自动把处理好的JS文件放到public/build/目录下。
4. 最后在代码里引用的时候，别直接写原路径了，用Laravel提供的方式获取编译后的URL：

// 先拿到编译后的资源URL
$adminJsUrl = Vite::asset('resources/assets/admin_js/admin_app.js');
Meta::addJs('admin_js', $adminJsUrl);

方式二：用Laravel Mix（Laravel 8及以下版本常用） #

如果你的项目是比较老的版本，用Mix的话这么操作：

1. 打开项目根目录的webpack.mix.js，添加你的JS文件编译规则：

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

// 意思是把resources下的admin_app.js编译到public/js/admin/目录下
mix.js('resources/assets/admin_js/admin_app.js', 'public/js/admin');

2. 终端运行编译命令：

# 开发环境
npm run dev

# 生产环境
npm run production

3. 然后直接引用public下编译好的文件就行：

Meta::addJs('admin_js', '/js/admin/admin_app.js');

这样一来，你既能把JS文件留在resources目录里做源码管理，浏览器也能正常访问到对应的资源啦！

内容的提问来源于stack exchange，提问作者Viktor