Nuxt不能识别.gql文件

在Nuxt.js项目中，Nuxt.js默认不会读取和解析GraphQL文件（.gql）。但是，可以通过添加graphql-loader和graphql-tag-loader两个webpack加载器来解决这个问题。

1. 安装graphql-loader和graphql-tag-loader：

npm install graphql-loader graphql-tag-loader --save-dev

2. 在Nuxt.js项目的nuxt.config.js文件中添加以下代码：

module.exports = { build: { loaders: [ { test: /.(graphql|gql)$/, exclude: /node_modules/, loader: 'graphql-tag/loader' } ] } }

3. 配置完成后，就可以在Nuxt.js项目中使用.gql文件了：

<template> <div> <h1>{{ post.title }}</h1> <p>{{ post.content }}</p> </div> </template>

<script> import postQuery from './queries/post.gql'; export default { asyncData({ app }) { return app.apolloProvider.defaultClient.query({ query: postQuery, variables: { id: '1' } }).then(({ data }) => { return { post: data.post }; }); } } </script>

请注意，这个示例假设您已经安装了“@nuxtjs/apollo”和“vue-apollo”模块以及使用Apollo Client作为GraphQL客户端。如果还没有安装，请按照官方文档安装并配置。