为何无法在独立文件导入Vuetify后通过require引入使用？

云原生阿岚

2026-5-9

为什么在独立文件导入Vuetify后通过require引入会提示Vuetify未定义？

问题重现

你有两个JS文件：
bootstrap.js：

import Vuetify from 'vuetify';
Vue.use(Vuetify);

app.js：

require('bootstrap');
var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({ })
});

当你在bootstrap.js导入Vuetify并注册插件，再在app.js里require这个文件时，会报错Vuetify is not defined，但把导入代码移到app.js里就正常了。

原因分析

这个问题本质上是模块作用域隔离和ES模块与CommonJS语法混用导致的：

模块作用域的独立性
每个JS模块（不管是ES模块还是CommonJS）都有自己的私有作用域。你在bootstrap.js里用import引入的Vuetify，只是该模块内部的局部变量，并没有通过导出语句暴露给外部。哪怕你在bootstrap.js里执行了Vue.use(Vuetify)让Vue注册了插件，Vuetify本身依然只存在于bootstrap.js的作用域里，app.js根本访问不到这个变量。
ES模块与CommonJS的机制差异
bootstrap.js用的是ES模块的import语法，而app.js用的是CommonJS的require。虽然很多打包工具（比如Webpack）能兼容这种混用，但两者的导出/导入逻辑不一样：

ES模块需要用export明确导出变量/对象；
CommonJS则通过module.exports暴露内容。
你的bootstrap.js没有任何导出，所以app.js里require('./bootstrap.js')得到的是一个空对象（或者默认导出的空值），自然找不到Vuetify。

解决方法

根据你的需求，有几种可行的方案：

方案1：让bootstrap.js导出Vuetify，调整app.js的导入方式

修改bootstrap.js，把Vuetify导出：

import Vuetify from 'vuetify';
Vue.use(Vuetify);
export default Vuetify; // 导出Vuetify供外部使用

然后在app.js里正确获取导出的内容：

require('bootstrap');
// 注意ES模块的default导出在CommonJS里要通过.default获取
const Vuetify = require('./bootstrap.js').default;
var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({ })
});

方案2：统一模块语法，避免混用

要么全用ES模块：
app.js改成：

import 'bootstrap';
import './bootstrap.js'; // 先执行bootstrap.js里的插件注册
import Vuetify from 'vuetify';
var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({ })
});

要么全用CommonJS：
bootstrap.js改成：

const Vuetify = require('vuetify');
Vue.use(Vuetify);
module.exports = Vuetify;

app.js保持原来的require写法即可：

require('bootstrap');
const Vuetify = require('./bootstrap.js');
var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({ })
});

方案3：如果不需要在app.js里直接实例化Vuetify（仅注册插件）

如果你的场景只是要让Vuetify插件生效，不需要在app.js里new Vuetify()，那只需要确保bootstrap.js在app.js之前被加载执行即可。但你的代码里需要实例化Vuetify，所以这个方案不适用你的情况，不过可以作为拓展思路。

内容的提问来源于stack exchange，提问作者VerySeriousSoftwareEndeavours