From fd0a0d9bcaf0fd9098c5eb1a0c53226575fdcccb Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 15 Mar 2021 12:02:45 -0400
Subject: [PATCH] fix(json): support importing json with ?url and ?raw queries

fux #2455
---
 packages/playground/json/__tests__/json.spec.ts | 16 +++++++++++++++-
 packages/playground/json/index.html             | 14 +++++++++++++-
 packages/vite/src/node/plugins/json.ts          |  2 ++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/playground/json/__tests__/json.spec.ts b/packages/playground/json/__tests__/json.spec.ts
index 2a9451d1c41ca7..476aabae99607e 100644
--- a/packages/playground/json/__tests__/json.spec.ts
+++ b/packages/playground/json/__tests__/json.spec.ts
@@ -1,3 +1,5 @@
+import { isBuild } from '../../testUtils'
+
 const json = require('../test.json')
 const deepJson = require('@vue/runtime-core/package.json')
 const stringified = JSON.stringify(json)
@@ -27,6 +29,18 @@ test('dynamic import, named', async () => {
   expect(await page.textContent('.dynamic-named')).toBe(json.hello)
 })
 
-test('raw fetch', async () => {
+test('fetch', async () => {
   expect(await page.textContent('.fetch')).toBe(stringified)
 })
+
+test('?url', async () => {
+  expect(await page.textContent('.url')).toMatch(
+    isBuild ? 'data:application/json' : '/test.json'
+  )
+})
+
+test('?raw', async () => {
+  expect(await page.textContent('.raw')).toBe(
+    require('fs').readFileSync(require.resolve('../test.json'), 'utf-8')
+  )
+})
diff --git a/packages/playground/json/index.html b/packages/playground/json/index.html
index 0efaea3147a164..d10145511b5996 100644
--- a/packages/playground/json/index.html
+++ b/packages/playground/json/index.html
@@ -10,9 +10,15 @@ <h2>Dynamic Import</h2>
 <pre class="dynamic"></pre>
 <pre class="dynamic-named"></pre>
 
-<h2>Raw fetch</h2>
+<h2>fetch</h2>
 <pre class="fetch"></pre>
 
+<h2>Importing as URL</h2>
+<pre class="url"></pre>
+
+<h2>Raw Import</h2>
+<pre class="raw"></pre>
+
 <script type="module">
   import json, { hello } from './test.json'
   import deepJson, { name } from '@vue/runtime-core/package.json'
@@ -34,6 +40,12 @@ <h2>Raw fetch</h2>
       text('.fetch', JSON.stringify(data))
     })
 
+  import url from './test.json?url'
+  text('.url', url)
+
+  import raw from './test.json?raw'
+  text('.raw', raw)
+
   function text(sel, text) {
     document.querySelector(sel).textContent = text
   }
diff --git a/packages/vite/src/node/plugins/json.ts b/packages/vite/src/node/plugins/json.ts
index 01b0fb34506bf7..812c59d48ef12a 100644
--- a/packages/vite/src/node/plugins/json.ts
+++ b/packages/vite/src/node/plugins/json.ts
@@ -8,6 +8,7 @@
 
 import { dataToEsm } from '@rollup/pluginutils'
 import { Plugin } from 'rollup'
+import { SPECIAL_QUERY_RE } from '../constants'
 
 export interface JsonOptions {
   /**
@@ -35,6 +36,7 @@ export function jsonPlugin(
 
     transform(json, id) {
       if (!jsonExtRE.test(id)) return null
+      if (SPECIAL_QUERY_RE.test(id)) return null
 
       try {
         if (options.stringify) {