博客

问题描述

开发环境是可以正常使用vue-router的，但打包后electron控制台出现Uncaught ReferenceError: exports is not defined报错

找了下是vue-router源码里面开头代码的问题Object.defineProperty(exports, ‘__esModule’, { value: true });，

官方关于这个问题的探讨

https://github.com/electron-vite/electron-vite-vue/issues/103

总结一下，官方插件影响了es模块的正常打包，导致vue-router使用路由懒加载的写法打包完会报错

解决办法一（推荐）

针对此，官方给出了解决方案，注意，需要

vite-plugin-electron

0.4.2版本及以上

vite.config.ts

import polyfillExports from 'vite-plugin-electron/polyfill-exports'

export default {
  plugins: [
    // ...other plugins
    polyfillExports(),
  ],
}

解决办法二

不使用路由组件懒加载，由原先的

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../pages/index.vue")
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

改为

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"

import index from "../pages/index.vue"

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: index
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

解决办法三

我个人使用的是vite-plugin-pages插件，动态生成路由信息，如果你也使用了这个插件，如下配置，也可以正常打包

vite.config.ts

build: {
    ...
    rollupOptions: {
      output: {
      format: "commonjs"
      }
    }
  }