Laravel视图中如何使用node_modules资源？以Material Design Icons为例

你遇到的核心问题是：大多数前端开发服务器和构建工具默认不会对外暴露node_modules目录，浏览器无法直接请求到这个目录下的文件，所以直接用相对路径引用自然无效。不用把文件移到public目录，有更合理的解决方案，分几种常见场景给你说明：

1. 通过构建工具直接导入（推荐方案） #

这是最标准的做法，利用前端构建工具（比如Webpack、Vite、Vue CLI、Create React App等）的模块解析能力，直接在项目的入口文件里导入CSS：

比如在你的main.js（Vue项目）或者index.js（React项目）里添加一行：

import 'mdi/css/materialdesignicons.min.css'

构建工具会自动处理这个依赖，把CSS打包到最终的输出资源中，不管是开发环境还是生产环境都能正常加载图标样式。

2. 配置开发服务器暴露node_modules（仅开发环境临时使用） #

如果你只是想在开发阶段直接通过路径引用，不想修改代码导入，可以配置开发服务器，让它允许访问node_modules目录。举两个常见工具的配置例子：

Vue CLI项目 #

在项目根目录创建或修改vue.config.js，添加devServer配置：

module.exports = {
  devServer: {
    static: {
      directory: './node_modules'
    }
  }
}

重启开发服务器后，就可以用/mdi/css/materialdesignicons.min.css这样的路径引用了（不用../，因为node_modules被设为静态资源目录）。

Vite项目 #

修改vite.config.js，添加server.fs.allow配置：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    fs: {
      allow: ['./node_modules']
    }
  }
})

同样重启服务器后，就可以直接引用该路径了。

⚠️ 注意：这个方法只适合开发环境，生产环境打包时依然需要用第一种导入方式，否则部署后还是会找不到文件。

3. 使用CDN链接替代（无需本地依赖） #

如果不想依赖本地的node_modules，也可以直接在HTML文件里引入CDN版本的样式：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdi@latest/css/materialdesignicons.min.css">

这样不用处理本地文件，也能正常使用图标，适合快速测试或者简单项目。

为什么移到public目录能生效？因为public是构建工具默认的静态资源目录，里面的文件会被直接复制到最终的输出目录，并且服务器会对外暴露这个目录，所以浏览器能访问到。但这种方式跳过了构建工具的依赖管理，不是最佳实践。

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