如何从Directus数据库拉取数据到站点？import语法错误如何解决？

你遇到的Uncaught SyntaxError: Cannot use import statement outside a module错误，核心原因是代码使用了ES Module（ESM）的import语法，但当前JS运行环境没有将脚本识别为ESM模块，可根据你的运行场景选择对应修复方式：

场景1：浏览器端直接运行脚本 #

给引入JS的<script>标签添加type="module"属性即可，同时支持代码里的顶级await语法：

<script type="module">
// 代码可以直接写在标签内，也可以用src引入外部js文件
import { Directus } from '@directus/sdk';

const directus = new Directus('https://api.example.com/');

await directus.auth.login({
    email: 'admin@example.com',
    password: 'pass',
});
const articles = await directus.items('articles').readMany();

console.log({
    items: articles.data,
    total: articles.meta.total_count,
});
</script>

场景2：Node.js环境运行 #

两种方案二选一：

• 在项目的package.json中添加"type": "module"配置项，Node.js会默认将所有.js文件识别为ESM模块
• 将import语法替换为CommonJS的require写法，注意要把顶级await包进异步函数：

const { Directus } = require('@directus/sdk');

(async () => {
  const directus = new Directus('https://api.example.com/');
  await directus.auth.login({
      email: 'admin@example.com',
      password: 'pass',
  });
  const articles = await directus.items('articles').readMany();
  console.log({
      items: articles.data,
      total: articles.meta.total_count,
  });
})()

场景3：使用Webpack/Vite等打包工具 #

目前主流打包工具的最新版本默认已经支持ESM解析，出现该报错优先检查是否手动修改了配置关闭了ESM相关规则，恢复默认配置即可。

单独为站点创建Directus数据项目的做法是否正确？ #

是正确的，完全符合Directus作为无头CMS的设计理念：

• 权限隔离：可以单独为站点配置只读/指定写入权限的角色，避免误操作其他业务的数据
• 维护独立：站点前端迭代、Directus版本升级互不干扰
• 扩展性强：后续如果需要新增多站点、小程序等其他前端载体，可以直接复用同一个Directus实例的数据层，无需重复建设

是否可以将站点项目与数据库放在同一处？ #

技术上可以实现，根据项目规模选择即可：

• 个人小流量项目：可以放在同一台服务器，降低运维成本，没有明显问题
• 中大型生产项目：建议分开部署，优势如下：
  • 避免单点故障：站点服务故障不会影响数据库运行，数据库维护也不会中断站点静态资源的访问
  • 性能更优：前端站点可以部署在CDN实现全球加速，Directus和数据库放在后端专属服务器，压力分摊后响应速度更快
  • 安全性更高：数据库可以配置仅允许内网IP访问，不暴露公网，大幅降低被攻击的风险

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