咨询：能否用Statamic CMS+GraphQL+Vue.js搭建门户网站？

一、可行性确认 #

这三者完全可以无缝整合：Statamic原生支持GraphQL API，Vue.js作为前端框架可通过GraphQL客户端轻松对接Statamic的内容接口，非常适合搭建前后端分离的门户网站。

二、分步整合操作 #

1. 开启Statamic的GraphQL服务 #

• 登录Statamic后台，进入Settings > GraphQL，勾选启用GraphQL功能
• 配置权限：选择允许被查询的内容集合、字段，按需设置API访问令牌（用于限制匿名访问）
• 调试验证：访问站点的/graphql路径，用内置的GraphiQL界面测试查询语句，确认能正常获取内容

2. Vue.js前端对接GraphQL #

• 安装依赖：在Vue项目中安装GraphQL客户端工具

  npm install @apollo/client graphql
  

• 配置Apollo客户端，连接Statamic的GraphQL端点

  import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
  import { createApolloProvider } from '@vue/apollo-option'
  
  // 替换为你的Statamic站点域名
  const httpLink = createHttpLink({
    uri: 'https://your-statamic-domain.com/graphql',
    // 需要认证时添加令牌
    headers: {
      Authorization: 'Bearer YOUR_STATAMIC_API_TOKEN'
    }
  })
  
  const cache = new InMemoryCache()
  const apolloClient = new ApolloClient({ link: httpLink, cache })
  const apolloProvider = createApolloProvider({ defaultClient: apolloClient })
  
  // 注册到Vue应用
  createApp(App).use(apolloProvider).mount('#app')
  

• 在Vue组件中编写查询获取内容

  <template>
    <section class="page-content">
      <h2>{{ pageData?.title }}</h2>
      <div v-html="pageData?.content"></div>
    </section>
  </template>
  
  <script setup>
  import { useQuery, gql } from '@apollo/client/core'
  
  // 查询指定slug的页面内容
  const GET_PAGE = gql`
    query GetPage($slug: String!) {
      entry(slug: $slug, collection: "pages") {
        title
        content
      }
    }
  `
  
  const { result } = useQuery(GET_PAGE, {
    variables: { slug: 'home' }
  })
  const pageData = result.value?.entry
  </script>
  

3. 进阶优化建议 #

• 用Statamic的GraphQL片段（Fragments）复用重复的字段查询逻辑，减少代码冗余
• 给Vue组件添加加载状态、错误提示，提升用户体验
• 利用Statamic的角色权限系统，精细控制GraphQL API的可访问内容范围

三、核心开发参考要点 #

Statamic GraphQL相关 #

• 支持查询集合条目、全局集、资产、导航等所有Statamic内容类型
• 内置过滤、排序、分页参数，可灵活获取目标内容
• 支持自定义GraphQL模式，扩展字段或新增自定义类型

Vue-Apollo相关 #

• 适配Vue 2和Vue 3两种版本的集成方案
• 提供组件级查询、突变（修改内容）、订阅功能
• 自带缓存管理，可优化内容加载性能

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