为什么vue项目require引入json文件不能直接用变量接收地址？

最新推荐文章于 2025-05-27 14:14:42 发布

liu__software

最新推荐文章于 2025-05-27 14:14:42 发布

阅读量2.2k

点赞数 3

分类专栏： nodeJS 文章标签： nodejs

原文链接：https://www.zhihu.com/question/421711093

版权

nodeJS 专栏收录该内容

24 篇文章

订阅专栏

vue-cli4.x搭建的vue项目引用json文件，因为一些原因json路径不固定，就想到使用变量接收路径，然后require变量但是不行：

let url = "./data/test.json",
    json = require(url);
console.log(json);

用[]解析变量也不行

let url = "./data/test.json",
    json = require([url]);
console.log(json);

使用模版字符串就可以引入

let url = "./data/test.json",
    json = require(`${url}`);
console.log(json);

使用变量加空字符串也可以

let url = "./data/test.json",
    json = require(url + "");
console.log(json);

各位大佬们这是为什么？

解答：

这不是 vue 项目的问题，也不是引入 json 才会有的问题，而是因为 webpack 本身不支持 require 变量名的。

webpack require 为什么不支持变量呢？这是因为 webpack 是一个构建工具，而他的核心思想是一切都是模块，根据模块的依赖关系进行打包，而这些模块必须要是本地资源，既然是本地资源，就肯定是确定的资源，而没有必要使用未知的变量资源。

回到楼主的问题，为什么只用变量名就不行，而用字符串模板或变量名+空字符串就行：

let url = './data/test.json'
const json1 = require(url);
const json2 = require(`${url}`);
const json3 = require(url + '');

如上，json1 会报错，而 json2 和 json3 确能正常引入为什么呢？

webpack 只是一个打包工具，他最终输出的代码还是要在浏览器上运行的，所以可以尝试从浏览器上面的代码来分析一下到底怎么回事。我们在浏览器 app.js 文件中看到以上代码被编译成了如下：

"use strict";
__webpack_require__.r(__webpack_exports__);
var url = './data/test.json';
var json1 = __webpack_require__("./src sync recursive")(url);
var json2 = __webpack_require__("./src sync recursive ^.*$")("".concat(url));
var json3 = __webpack_require__("./src sync recursive ^.*$")(url + "");
console.log(json1, json2, json3);

可以看到， require 都被转换成 ___webpack_require__ 了，但是 json1 和 json2/json3 有个明显的不同，json1 的第一个参数是 ./src sync recursive ，而 json2/json3 的第一个参数都是 ./src sync recursive ^.*$

这两个到底是什么东西呢？我也不知道，所以在 app.js 文件中搜索一下，发现如果请求参数是 ./src sync recursive 则会调用下面的代码，他的结果是抛出一个 cannot find module 错误：

function webpackEmptyContext(req) {
 var e = new Error("Cannot find module '" + req + "'");
 e.code = 'MODULE_NOT_FOUND';
 throw e;
}

webpackEmptyContext.keys = function() { return []; };

webpackEmptyContext.resolve = webpackEmptyContext;
module.exports = webpackEmptyContext;
webpackEmptyContext.id = "./src sync recursive";

而如果是 ./src sync ^.*$ ，则会执行以下代码，他会从 map 映射表中找到对应的资源的，如果找到，就正常返回，如果 map 中不存在也会报错：

var map = {
  "./App": "./src/App.vue",
  "./App.vue": "./src/App.vue",
  "./components/HelloWorld": "./src/components/HelloWorld.vue",
  "./components/HelloWorld.vue": "./src/components/HelloWorld.vue",
  "./data/test": "./src/data/test.json",
  "./data/test.json": "./src/data/test.json",
  "./main": "./src/main.js",
  "./main.js": "./src/main.js",
  "./webpack": "./src/webpack.js",
  "./webpack.js": "./src/webpack.js"
};
function webpackContext(req) {
  var id = webpackContextResolve(req);
  return __webpack_require__(id);
}

webpackContextResolve(req) {
  if(!__webpack_require__.o(map, req)) {
    var e = new Error("Cannot find module '" + req + "'");
    e.code = 'MODULE_NOT_FOUND';
    throw e;
  }
  return map[req];
}
webpackContext.keys = function webpackContextKeys() {
  return Object.keys(map);
};

到此，我们也大概明白了为什么 require“纯变量”不行，而 require 字符串模板或变量+空字符却可以了，这是因为 webpack 在编译代码的时候处理的不一样。

另外：

还从来没有这么引用过，建议利用 node 自带的变量 __dirname 来实现拼接路径

const resolve = dir => path.join(__dirname, dir);

使用 webpack 的 require.context API，文档地址：require.context。

它的作用是生成一个特定的上下文，用于自定义引入模块。通常在遇到需要从一个文件夹引入很多模块的时候，通过该 API 自动引入该文件夹下的模块，避免多次的显式引用。

// 显式引入
import ComponentA from './components/ComponentA.js'
import ComponentB from './components/ComponentB.js'
import ComponentC from './components/ComponentC.js'

// 自动引入
const ctx = require.context('./components', false, /\.js$/)

转载于：https://www.zhihu.com/question/421711093