Vue Vite构建配置路由懒加载后报exports is not defined错误

改造Vue路由为懒加载模式时，仅将/products/domains路由的组件引入从静态import替换为() => import()动态导入写法，开发环境npm run dev运行正常，生产环境vite build构建后访问页面控制台报错：

uncaught ReferenceError: exports is not defined

切回静态引入方式后构建产物可正常运行。
相关报错截图：

涉及的核心代码片段：

router.js 路由配置 #

import {createRouter, createWebHistory} from 'vue-router'
import Dashboard from './pages/Dashboard.vue'
import PageNotFound from './pages/utility/PageNotFound.vue'
import Signin from './pages/Signin.vue'
import Signup from './pages/Signup.vue'
import ResetPassword from './pages/ResetPassword.vue'
import ResetPasswordToken from './pages/ResetPasswordToken.vue'
import Account from './pages/settings/Account.vue'
import store from "./utils/Store";
import axios from "axios";
// 冗余的静态引入
import Domains from "./pages/products/Domains.vue";

const routerHistory = createWebHistory()
// 省略logout、verifyLogin等内部逻辑
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            component: Dashboard,
            name: 'dashboard',
            meta: { requiresAuth: true }
        },
        {
            path: '/products/domains',
            name: 'products_domains',
            //component: Domains,
            // 懒加载写法
            component: () => import('./pages/products/Domains.vue'),
            meta: { requiresAuth: true }
        },
        // 省略其他路由配置
    ]
})
// 省略路由守卫逻辑
export default router

Domains.vue 组件代码 #

<script>
import Sidebar from '../../partials/Sidebar.vue'
import Header from '../../partials/Header.vue'
import axios from "axios";
import store from "../../utils/Store";

export default {
  name: "Domains",
  components: { Sidebar, Header },
  data() {
    return {
      sidebarOpen: false,
      products: {},
    }
  },
  beforeMount() {
    this.loadingProducts();
  },
  methods: {
    loadingProducts() {
      this.requestProducts().then(result => {
        this.products = result.data.data;
      });
    },
    requestProducts() {
      return axios.get(store.state.apiDomain + 'products/domains', store.state.request.defaultAxiosConfig);
    }
  }
}
</script>

报错本质是生产构建时CommonJS（CJS）和ESModule（ESM）模块规范冲突，两个触发点：

1. router.js中同时保留了Domains组件的静态import和动态import懒加载，同个模块被两种方式重复解析，Rollup打包时生成了浏览器环境不识别的CJS格式exports变量引用
2. 项目中./utils/Store文件大概率使用了CJS规范的module.exports/exports.xxx写法导出，静态引入时Vite的dev服务和Rollup打包都会自动做CJS到ESM的兼容转换，但动态import拆分异步chunk时，兼容转换逻辑未覆盖到该依赖，浏览器环境不存在全局exports变量直接抛错。
   开发环境不报错是因为Vite dev服务器基于esbuild做实时转译，模块兼容处理逻辑更宽松，不会做最终的chunk拆分，所以不会触发这个问题。

按以下顺序操作即可解决：

• 第一步：删除router.js顶部冗余的Domains静态引入代码，也就是import Domains from "./pages/products/Domains.vue"这行，做懒加载的组件不需要额外静态引入。
• 第二步：修改./utils/Store文件的导出规范，将所有CJS风格的导出统一改成ESM写法：

  把module.exports = xxx改成export default xxx，把exports.xxx = xxx改成export const xxx = xxx，不要混用两种模块规范。

• 第三步：如果修改后仍有报错，给动态import加Vite识别注释，强制按ESM模式处理异步chunk，把懒加载代码改成：

  component: () => import(/* @vite-ignore */ './pages/products/Domains.vue')
  

• 第四步：清理构建缓存，删除项目下的node_modules/.vite缓存目录和dist产物目录，重新执行vite build即可。

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