我有一个新的基于 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',
}),
],
},
};
我该如何解决这个问题?
最佳答案
这行得通!
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();
},
};
关于webpack - 如何让 Vue (vue cli 3) 正确处理 GraphQL 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51469006/