代码之家 › 专栏 › 技术社区 › ffxsam

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

vue-cli graphql vue.js webpack

9

ffxsam · 技术社区 · 6 年前

我有一个新的基于vue cli 3的项目,它 .graphql 中的文件 src/ 文件夹,例如:

#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',
      }),
    ],
  },
};

我该怎么解决?

2 回复 | 直到 6 年前

1

3

ffxsam 6 年前

这是有效的!

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

1

Andy Gaskell 6 年前

我很确定 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文档的理解。我没有一个项目来测试这个,但如果你发布一个链接到你的项目,我会非常乐意测试。