Laravel中Bootstrap.js及自定义JS文件的存储与视图引入咨询

嘿，这个问题在Laravel开发里确实容易搞混，尤其是不同版本的构建工具（Mix vs Vite）差异，我给你分情况说清楚：

一、JS文件的存储位置 #

Laravel的JS文件存储逻辑分两种主流构建工具场景：

1. Laravel 7及更早版本（使用Laravel Mix） #

• 框架自带的JS文件（比如bootstrap.js）默认放在resources/js/目录下，这个目录也是官方推荐的JS源文件存放地。
• 你的自定义JS文件，可以直接放在resources/js/根目录，或者新建子目录（比如resources/js/custom/）来分类管理，方便维护。

2. Laravel 8+版本（使用Vite） #

• 存储逻辑和Mix版本一致，框架JS（bootstrap.js）依然在resources/js/，自定义JS同样推荐放在这个目录下，比如创建resources/js/utils/、resources/js/components/这类子目录来区分不同功能的脚本。

注意：不要直接把源JS文件放在public/目录下，public/是编译后产物的存放地，源文件放在resources/才能利用构建工具的打包、压缩、模块化等特性。

二、视图中引入JS文件的方法 #

不同构建工具的引入流程略有不同，分别说明：

1. 使用Laravel Mix的情况 #

步骤1：配置Mix编译规则

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

• 编译单个自定义JS文件：

  mix.js('resources/js/custom/my-script.js', 'public/js');
  

• 合并多个JS文件到一个输出文件：

  mix.js(['resources/js/app.js', 'resources/js/custom/my-script.js'], 'public/js/app.js');
  

步骤2：执行编译命令

在终端运行对应的编译命令：

• 开发环境（带热重载，不压缩）：npm run dev
• 生产环境（压缩优化）：npm run prod
  编译后的文件会自动输出到public/js/目录下。

步骤3：在视图中引入

使用Laravel的asset()辅助函数引入编译后的文件：

<!-- 引入合并后的app.js -->
<script src="{{ asset('js/app.js') }}"></script>
<!-- 引入单独编译的my-script.js -->
<script src="{{ asset('js/my-script.js') }}"></script>

2. 使用Vite的情况 #

步骤1：关联自定义JS文件

有两种方式关联：

• 在默认入口文件resources/js/app.js中导入你的自定义脚本：

  // 导入自定义JS
  import './custom/my-script.js';
  

• 或者在vite.config.js中添加多个入口：

  export default defineConfig({
    plugins: [laravel([
      'resources/js/app.js',
      'resources/js/custom/my-script.js',
    ])],
  });
  

步骤2：启动开发服务或编译

• 开发环境（热重载）：npm run dev
• 生产环境（编译到public/build）：npm run build

步骤3：在视图中引入

使用Laravel提供的@vite指令，它会自动处理开发/生产环境的路径：

<!-- 引入默认入口及关联的脚本 -->
@vite(['resources/js/app.js'])
<!-- 如果是多入口，直接列出 -->
@vite(['resources/js/app.js', 'resources/js/custom/my-script.js'])

特殊情况：直接引入未编译的JS #

如果你的脚本非常简单，不想用构建工具，也可以直接把JS文件放到public/js/目录下，然后用asset()引入：

<script src="{{ asset('js/simple-script.js') }}"></script>

不过这种方式不支持ES6模块化、代码压缩等优化，仅适合小型脚本。

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