博客

解决vue项目报错webpackJsonp is not defined问题

  • Post category:http

针对vue项目报错webpackJsonp is not defined的问题，我们可以采用以下的攻略：

问题描述

在使用VueCLI 2.x或3.x创建的vue项目中，我们可能会遇到下面这样的报错信息：

Uncaught ReferenceError: webpackJsonp is not defined

这个错误通常会发生在项目打包（npm run build）后，打开浏览器访问页面的时候。

解决方法

方法一：升级webpack和/或vue-cli版本

首先，我们可以尝试升级webpack和/或vue-cli版本，因为这个问题往往是由于webpack和vue-cli的版本不兼容造成的。具体步骤如下：

1.1 升级webpack

我们可以在项目根目录下找到package.json文件，查看当前项目安装的webpack版本号，如下所示：

"devDependencies": {
  "webpack": "^4.41.2",
  // ...
}

如果你的webpack版本号低于4.x，建议升级到4.x或以上版本。具体可参考以下文档：webpack中文官网。

1.2 升级vue-cli

升级vue-cli可以通过以下命令完成：

npm update -g @vue/cli

如果你是使用vue-cli 3.x创建的项目，建议升级到最新版本。具体可参考以下文档：Vue CLI官方文档。

方法二：调整webpack配置

如果升级webpack和vue-cli版本后仍然无法解决问题，那么我们就需要手动调整webpack的配置。具体步骤如下：

2.1 打开webpack配置文件

我们可以在项目根目录下找到vue.config.js文件（如果不存在，可以新建一个）。然后在该文件中添加以下代码：

module.exports = {
  configureWebpack: {
    output: {
      // 把引入模块时 webpackJsonp 错误修改为 __webpack_require__.jsonp
      jsonpFunction: '__webpack_require__.jsonp'
    }
  }
}

2.2 重新打包项目

修改完webpack配置后，我们需要重新打包一下项目（npm run build），然后再启动项目即可。如果还是出现webpackJsonp is not defined的问题，可以继续尝试其他方法。

方法三：手动修改生成的index.html文件

如果以上两种方法都无法解决问题，那么我们只能采用比较暴力的方法了：手动修改生成的index.html文件。具体步骤如下：

3.1 打开index.html文件

我们可以在dist目录下找到生成的index.html文件，使用编辑器打开该文件。

3.2 修改index.html文件

在index.html文件中，我们需要将下面这行代码中的”webpackJsonp”改为”webpack_require.jsonp”，代码如下：

<script src="/js/chunks/vendor.6d2b2da6.js"></script>

修改后的代码如下：

<script src="/js/chunks/vendor.6d2b2da6.js" type="text/javascript"></script>
<script type="text/javascript">
      !function () {
          // webpackBootstrap
          var t = window.webpackJsonp;
          window.webpackJsonp = function (e, n, r) {
              // do something...
          };
      }();
</script>

3.3 重新打包项目

修改完index.html文件后，我们需要重新打包一下项目（npm run build），然后再启动项目即可。

示例说明

下面我来举两个示例说明，帮助大家更好地理解如何解决webpackJsonp is not defined问题。

示例一：升级webpack版本

我们有一个使用VueCLI 3.x创建的vue项目，打包后总是报错：Uncaught ReferenceError: webpackJsonp is not defined。

我们查看该项目根目录下的package.json文件，发现webpack的版本号是3.12.0。因此，我们尝试升级webpack版本。具体步骤如下：

  1. 执行以下命令升级webpack：
npm install webpack@4.44.2 --save-dev
  1. 升级完webpack后，重新打包项目：
npm run build
  1. 测试项目是否可以正确运行。

示例二：调整webpack配置

我们有一个使用VueCLI 2.x创建的vue项目，打包后总是报错：Uncaught ReferenceError: webpackJsonp is not defined。

我们尝试手动调整webpack的配置，具体步骤如下：

  1. 在该项目根目录下新建vue.config.js文件。

  2. 在该文件中添加以下代码：

module.exports = {
  configureWebpack: {
    output: {
      jsonpFunction: '__webpack_require__.jsonp'
    }
  }
}
  1. 重新打包项目：
npm run build
  1. 测试项目是否可以正确运行。

以上就是解决vue项目报错webpackJsonp is not defined问题的完整攻略，希望可以帮助到各位开发者！

Tags: