Laravel Vite中如何引入node_modules中的JS资源（不编译/复制）

方案1：利用Vite裸模块导入（推荐） #

Vite原生支持直接导入node_modules中的包，无需写全路径。比如你安装了xxx-package，可直接在视图对应脚本中这样写：

// 导入整个包
import 'xxx-package'
// 按需导入指定模块
import { targetFunction } from 'xxx-package'

如果是Vue/React这类框架的单文件组件，直接在<script>块中导入即可；若是纯HTML视图，给脚本标签加上type="module"属性，Vite会自动处理包的解析与按需加载，仅在该视图被访问时加载对应资源，不会打包进主JS文件。

方案2：配置Vite别名简化路径 #

若需明确指向包内具体文件，可在vite.config.js中配置别名，避免直接硬编码node_modules路径：

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@libs': path.resolve(__dirname, 'node_modules')
    }
  }
})

之后在视图中就能用别名导入：

import '@libs/xxx-package/dist/xxx.min.js'

这种方式既简化了路径，也避免了暴露node_modules的内部结构，维护性更强。

方案3：直接引入CDN资源（适配有公开CDN的包） #

如果目标包提供公开CDN资源，可直接在视图的<script>标签中引入CDN链接，完全脱离本地node_modules依赖，不过要注意保持本地安装版本与CDN版本一致。

关于你之前使用的@vite(['node_modules/...']) #

这种写法确实不符合规范，node_modules是依赖目录，其内部结构可能随包更新发生变化，硬编码路径容易引发错误。上面的方案1和2都是Vite官方推荐的合规做法，更安全且易于维护。

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