Nuxt.js导入自定义constants.js文件报错，生产环境无此问题求解决

架构老林

2026-5-6

解决Nuxt开发环境导入CommonJS常量报错的问题

你遇到的这个问题确实有点“奇怪”，但其实是Nuxt开发模式和生产模式下webpack模块处理逻辑的差异导致的——开发环境的实时编译逻辑更直接，暴露了module.exports未初始化的问题，而生产打包的优化自动修复了这个漏洞。

问题根源

在开发环境中，webpack的模块加载流程没有像生产打包那样做合并优化，当你直接写module.exports.feature1 = [...]时，此时module.exports可能还没被初始化为一个对象，自然就会抛出“无法给undefined设置属性”的错误。而生产环境打包时，webpack会自动补全模块导出对象的初始化步骤，所以不会出现报错。

两种可行解决方案

方案1：改用ES模块导出（推荐）

Nuxt对ES模块的支持更友好，和Vue单文件组件的导入语法也更适配。修改你的constants.js为ES模块导出方式：

export const feature1 = [...];
export const feature2 = [...];
export const feature3 = [...];
export const news = [...];

你的index.vue里的解构导入代码完全不需要改动，重启开发服务器后就能正常运行，生产环境也能完美兼容。

方案2：初始化CommonJS导出对象

如果你坚持使用CommonJS写法，只需要先给module.exports赋值一个空对象，再添加常量属性即可：

// 先初始化module.exports为一个空对象
module.exports = {};

module.exports.feature1 = [...];
module.exports.feature2 = [...];
module.exports.feature3 = [...];
module.exports.news = [...];

这样就避免了module.exports为undefined的情况，开发环境也能正常加载常量。