Astro项目中引入Preline JS文件出现404错误求助

Astro 不会自动将 node_modules 目录下的文件暴露给浏览器访问。你在页面中引用的 /assets/vendor/preline/preline.js 路径，是在查找项目根目录 public/assets/vendor/preline/ 下的文件，但你并未将 preline.js 放置到该位置，因此触发 404 错误。

方法1：ES模块导入（推荐） #

在 Astro 组件（比如 index.astro）的脚本部分直接从 node_modules 导入 preline 的 JS 文件，Astro 会自动处理打包和路径映射：

---
import 'preline/preline.js';
---
<!-- 页面内容 -->

构建时 Astro 会将 preline.js 打包到输出目录，自动生成正确的访问路径，无需手动处理文件位置。

方法2：复制文件到public目录 #

如果坚持使用静态资源路径引用，可手动将 node_modules/preline/preline.js 复制到项目的 public/assets/vendor/preline/ 目录下（需先创建对应层级的文件夹），此时原引用路径 /assets/vendor/preline/preline.js 即可找到文件。

方法3：配置Vite别名（可选） #

若想简化导入路径，可在 astro.config.mjs 中配置别名：

import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    resolve: {
      alias: {
        'preline-js': 'preline/preline.js',
      },
    },
  },
});

之后在组件中可通过别名导入：

---
import 'preline-js';
---

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