Laravel项目中如何分离存放自定义与第三方vendor前端资源？

Laravel 根目录自带的vendor目录是后端Composer依赖专用目录，绝对不要存放前端资源，该目录默认不对外暴露，且执行Composer命令时可能被覆盖，和你之前的前端资源存放逻辑完全不冲突，你可以按照以下方案存放资源，完全符合Laravel官方规范：

自定义前端资源存放 #

如果你使用Laravel默认的Vite构建工具 #

自定义的源码类资源统一存放在resources/目录下：

• resources/css/：存放你自己编写的CSS文件，比如你之前的home.css
• resources/js/：存放你自己编写的JS文件，比如你之前的dashboard.js
  构建后Vite会自动把打包好的资源输出到public/build/目录，直接在Blade模板用@vite指令引入即可。

如果你不需要构建，直接使用静态资源 #

直接把自定义静态资源存放到public/assets/目录下即可，完全可以沿用你之前的目录结构：

示例结构：

• public/
  • assets/
    • css/
      • home.css
    • js/
      • dashboard.js
        引用时使用asset('assets/css/home.css')方法输出资源链接即可。

第三方前端依赖存放 #

你提到的charts、codemirror、clipboard这类第三方前端工具，有两种常用存放方案：

方案1：NPM安装（推荐，适配Vite） #

直接通过npm安装对应依赖，依赖会自动存放到根目录的node_modules/目录，不需要你手动管理位置，只需要在resources/js/app.js或者resources/css/app.css中导入需要的模块，Vite构建时会自动处理依赖打包。

方案2：手动引入静态包 #

如果你不想用NPM安装，要手动导入离线的第三方包，统一存放到public/vendor/目录下，结构可以和你之前的习惯保持一致：

示例结构：

• public/
  • vendor/
    • bootstrap/
      • css/
        • bootstrap.min.css
      • js/
        • bootstrap.min.js
    • codemirror/
    • chart.js/
    • clipboard/
      引用时使用asset('vendor/bootstrap/css/bootstrap.min.css')方法输出链接即可。

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