如何让 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 文件?的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli3或者4中如何正确的使用public中的图片

vue-cli3或者4中如何正确的使用public中的图片

使用 CLI 创建新项目后如何在 vue 3 中正确导入 Axios?

「Vue实战」武装你的前端项目

Vue.js CLI 3 - 如何为 CSS/Sass 创建供应商包?

vue学习vue-cli3开发单文件组件