External外部化后线上报错找不到依赖怎么办？

公孙东宇提问于 2026-03-22 23:47:20 阅读 9

优化

我在用 Vite 打包项目时，把 lodash 和 axios 通过 external 配置外部化了，本地开发没问题，但部署到线上后控制台报 Uncaught ReferenceError: _ is not defined，是不是漏了什么步骤？

我是在 vite.config.js 里这样配的：

export default {
  build: {
    rollupOptions: {
      external: ['lodash', 'axios'],
      output: {
        globals: {
          lodash: '_',
          axios: 'axios'
        }
      }
    }
  }
}

然后在 HTML 里手动加了 CDN 引用，但好像顺序或者变量名对不上？

我来解答赞 4 收藏

反馈

1 条解答

UE丶浩宇 Lv1

遇到这种情况，通常是因为外部化的库在 HTML 文件中的加载顺序不对，或者是全局变量名没有正确映射。你已经在 vite.config.js 里配置了 external 和 globals，看起来配置上没啥问题。关键是要确保在打包后的文件加载之前，CDN 链接已经加载完毕，并且全局变量名正确。

检查一下你的 HTML 文件，确保 lodash 和 axios 的 CDN 链接在你的 JavaScript 文件之前加载。顺序很重要，得先有全局变量 _ 和 axios，才能在后续的脚本中使用。

另外，确认一下 CDN 链接是否有效，可以临时去掉 external 配置，看看是否有错误信息，这样能排除 CDN 链接本身的问题。

正确的 HTML 引入方式大致如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Your App</title>

  <!-- 确保 lodash 和 axios 的 CDN 在这里引入 -->

  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>

<body>

  <div id="app"></div>

  <!-- 你的打包后的 JS 文件 -->

  <script type="module" src="/path/to/your/bundle.js"></script>

</body>

</html>

记得替换 src 属性为你实际使用的 CDN 链接地址。这样应该就能解决找不到依赖的问题了。

2026-03-23 00:00