如何让 Vue (vue cli 3) 正确处理 GraphQL 文件?
Posted
技术标签:
【中文标题】如何让 Vue (vue cli 3) 正确处理 GraphQL 文件?【英文标题】:How to get Vue (vue cli 3) to properly handle GraphQL files? 【发布时间】:2018-12-30 07:52:18 【问题描述】:我有一个基于 vue-cli 3 的新项目,它在 src/
文件夹中有 .graphql
文件,例如:
#import "./track-list-fragment.graphql"
query ListTracks(
$sortBy: String
$order: String
$limit: Int
$nextToken: String
)
listTracks(
sortBy: $sortBy
order: $order
limit: $limit
nextToken: $nextToken
)
items
...TrackListDetails
nextToken
当我运行 yarn serve
时,它抱怨没有 GraphQL 的加载器:
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #import "./track-list-fragment.graphql"
|
| query ListTracks(
但我的vue.config.js
确实设置正确(我认为):
const webpack = require('webpack');
const path = require('path');
module.exports =
configureWebpack:
resolve:
alias:
$scss: path.resolve('src/assets/styles'),
,
,
plugins: [
new webpack.LoaderOptionsPlugin(
test: /\.graphql$/,
loader: 'graphql-tag/loader',
),
],
,
;
我该如何解决这个问题?
【问题讨论】:
【参考方案1】:这行得通!
const path = require('path');
module.exports =
pluginOptions:
i18n:
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: false,
,
,
configureWebpack:
resolve:
alias:
$element: path.resolve(
'node_modules/element-ui/packages/theme-chalk/src/main.scss'
),
,
,
,
chainWebpack: config =>
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end();
,
;
【讨论】:
【参考方案2】:我很确定 LoaderOptionsPlugin 不是您想要的。 webpack 文档提到这是用于从 webpack 1 迁移到 webpack 2。这不是我们在这里所做的。
这是在"normal" webpack config 中配置加载程序的样子:
module.exports =
module:
rules: [
test: /\.css$/,
use: [
loader: 'style-loader' ,
loader: 'css-loader',
options:
modules: true
]
]
;
按照这种方法并假设我正确理解 Vue 3 docs,下面是我如何使用原始示例的数据配置 Vue 3 应用程序:
module.exports =
configureWebpack:
module:
rules: [
test: /\.css$/,
use: [
loader: 'style-loader' ,
loader: 'css-loader',
options:
modules: true
]
]
现在,我们需要配置 graphql 加载器而不是 css 加载器:
module.exports =
configureWebpack:
module:
rules: [
test: /\.graphql$/,
use: 'graphql-tag/loader'
]
这是未经测试的,我只是脱离了我对 webpack 和 Vue 文档的理解。我没有项目可以测试它,但如果您发布指向您的项目的链接,我会非常乐意测试。
【讨论】:
以上是关于如何让 Vue (vue cli 3) 正确处理 GraphQL 文件?的主要内容,如果未能解决你的问题,请参考以下文章
使用 CLI 创建新项目后如何在 vue 3 中正确导入 Axios?