如何让Vue(Vue-cli 3)正确处理GraphQL文件

Question

我有一个新的基于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',
}),
],
},
};

我该如何解决这个问题？

Answer 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();
},
};

Answer 2

我很确定LoaderOptionsPlugin不是您想要的。webpack文档提到这是用于从webpack 1迁移到webpack 2的。这不是我们在这里做的。

以下是在"正常"的webpack-config:中配置加载程序的样子

module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};

按照这种方法，假设我正确理解Vue 3文档，下面是我如何使用原始示例的数据配置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文档的理解。我没有一个项目来测试这个，但如果你发布一个项目链接，我会非常乐意测试。