Laravel 9中自定义JS/CSS文件的存放与引入方法

两种方式都符合Laravel的目录规范，根据你的项目需求选择即可：

方案1：直接存放至public目录（快速适用） #

如果你不需要对这些CSS/JS做压缩、合并、版本缓存控制，也不会频繁修改源文件，完全可以直接放public目录，不存在合规问题：

• 将所有CSS文件放入public/css/目录，JS文件放入public/js/目录，jQuery直接替换为你要使用的v3.6.0正式版文件即可
• 在Blade模板中通过全局asset()函数引用即可，示例：

<link rel="stylesheet" href="{{ asset('css/windows-98.css') }}">
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>

这种方式配置成本为0，适合小型项目、快速验证功能的场景。

方案2：使用Laravel Mix编译（推荐生产环境使用） #

如果你需要对静态资源做压缩、合并、自动清缓存、ES语法兼容等优化，或者后续会自定义修改这些文件的逻辑，就用Mix处理，具体流程如下：

1. 存放源文件
   不要把第三方源文件直接放public，统一放到resources目录下做源文件管理，比如新建resources/libs/os-gui/目录，把下载的css、js文件夹整体放入，jQuery源文件也放到该目录的js子文件夹中，替换为v3.6.0版本。
2. 安装依赖
   确保本地已安装Node.js与npm，在项目根目录执行命令安装前端依赖：

npm install
# 如果项目默认未带laravel-mix，执行下面命令追加安装
npm install laravel-mix --save-dev

3. 配置打包规则
   打开项目根目录的webpack.mix.js文件，按资源依赖顺序配置打包规则，示例：

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

// 合并打包所有OS GUI相关CSS为单个文件，减少HTTP请求
mix.styles([
    'resources/libs/os-gui/css/layout.css',
    'resources/libs/os-gui/css/windows-98.css',
    'resources/libs/os-gui/css/windows-default.css',
], 'public/css/os-gui.bundle.css');

// 按依赖顺序合并打包JS，注意jQuery必须放在最前面
mix.scripts([
    'resources/libs/os-gui/js/jquery-3.6.0.min.js',
    'resources/libs/os-gui/js/parse-theme.js',
    'resources/libs/os-gui/js/$Window.js',
    'resources/libs/os-gui/js/MenuBar.js',
    // 不需要演示逻辑的话可以去掉下面这行demo.js的引入
    'resources/libs/os-gui/js/demo.js',
], 'public/js/os-gui.bundle.js');

// 生产环境开启版本号，自动解决浏览器缓存旧文件问题
if (mix.inProduction()) {
    mix.version();
}

4. 执行构建

• 开发环境构建（不压缩、快速打包）：执行npm run dev
• 生产环境构建（自动压缩混淆、去除冗余代码）：执行npm run production
  构建完成后，打包好的文件会自动输出到你配置的public/css、public/js目录下。

5. 模板引用
   未开启版本号时，直接用asset()引用打包后的文件即可；如果开启了版本号，用mix()函数引用，会自动匹配带哈希值的最新文件：

<link rel="stylesheet" href="{{ mix('css/os-gui.bundle.css') }}">
<script src="{{ mix('js/os-gui.bundle.js') }}"></script>

注意事项 #

• JS打包时必须严格按照依赖顺序排列，jQuery要放在所有依赖它的组件前面，否则会出现$ is not defined的报错
• 仓库自带的demo.js是演示用文件，如果你不需要示例交互逻辑可以不引入，减少打包体积
• 如果你不想合并文件，也可以用mix.copy()方法将源文件从resources目录复制到public目录，Mix会自动对文件做压缩处理

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