构建Vue Vite PWA时添加外部库遇mxgraph undefined错误的解决方法

问题说明 #

搭建Vite+Vue的PWA应用时，直接在index.html中配置mxBasePath并引入mxClient.js会出现加载失败和undefined错误，相关代码如下：

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vite + Vue</title>
    <script type="text/javascript">
      mxBasePath = './node_modules/mxgraph/javascript/src';
    </script>
    <script type="text/javascript" src="./node_modules/mxgraph/javascript/src/js/mxClient.js"></script>
  </head>
</html>

vite.config.js #

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      injectRegister: 'auto',
      workbox: {
        cleanupOutdatedCaches: true,
        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}']
      },
      manifest: {
        name: 'demo',
        short_name: 'demodemo',
        icons: [
          {
            src: '/pwa/img/48x48.png',
            sizes: '48x48',
            type: 'image/png'
          },
        ],
        theme_color: '#ffffff',
        background_color: '#1f1f1f',
        display: 'standalone',
        orientation: 'portrait'
      },
      devOptions: {
        enabled: true,
        type: 'module'
      }
    })
  ]
});

解决步骤 #

1. 调整mxgraph资源访问路径 #

Vite默认禁止直接从node_modules目录加载前端资源，有两种可行方案：

方案一：复制资源到public目录

• 手动将node_modules/mxgraph/javascript/src整个文件夹复制到项目的public目录下，重命名为mxgraph
• 修改index.html中的配置：

<script type="text/javascript">
  // 改为public下的绝对路径
  mxBasePath = '/mxgraph';
</script>
<script type="text/javascript" src="/mxgraph/js/mxClient.js"></script>

方案二：配置Vite别名

• 在vite.config.js中添加别名配置，让Vite能正确解析mxgraph的路径：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePWA from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      // 保留原有PWA配置
    })
  ],
  resolve: {
    alias: {
      '@mxgraph': './node_modules/mxgraph/javascript/src'
    }
  }
})

• 在Vue组件中按需导入（推荐这种方式，避免全局加载）：

// 在需要使用mxgraph的组件中
import '@mxgraph/js/mxClient.js'

export default {
  mounted() {
    // 先检查浏览器兼容性
    if (mxClient.isBrowserSupported()) {
      // 这里编写你的mxgraph初始化逻辑
      const container = this.$refs.graphContainer
      const graph = new mxGraph(container)
      // ...其他操作
    }
  }
}

2. 更新PWA缓存规则 #

确保Workbox能缓存mxgraph的相关资源，在vite.config.js的workbox.globPatterns中添加mxgraph的文件类型或路径：

workbox: {
  cleanupOutdatedCaches: true,
  globPatterns: [
    '**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}',
    'mxgraph/**/*.js' // 添加mxgraph的js文件缓存规则
  ]
}

3. 避免全局变量冲突 #

如果使用组件内导入的方式，不需要在index.html中全局定义mxBasePath，mxgraph会自动根据导入路径识别资源位置，减少全局变量污染的可能。

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