module.exports = { // externals: { // echarts: 'echarts', // }, assetsDir: '', baseUrl: './', //重要设置！可以让资源路径以“相对路径”放置，类似http://258754.cn/2019/bfhb/index.html为首页访问时，保证资源路径正确。 configureWebpack: config => { const myConfig = {} myConfig.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios': 'axios', 'lodash': '_', 'echarts': 'echarts', 'element-ui': 'ELEMENT' } echarts前段运行正常，打包后出现 echarts is not defined

根据你提供的代码，你设置了webpack的externals属性，将vue、vue-router、axios、lodash、echarts和element-ui作为外部依赖，并在打包时不将它们打包进入bundle中。

但是，你在打包后访问页面时遇到了"echarts is not defined"错误。这是因为你在页面中使用了echarts，但是在webpack中将它设置为了外部依赖，导致页面中无法找到echarts的定义。

解决这个问题的方法是在页面中引入echarts的CDN链接或者在webpack中将echarts从外部依赖中移除，让webpack将它打包进bundle中。例如，在configureWebpack中加入如下代码：

config.externals = {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'axios': 'axios',
  'lodash': '_',
  'element-ui': 'ELEMENT',
  'echarts': 'echarts' // 将echarts从外部依赖中移除
}

或者在页面中引入echarts的CDN链接：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>

相关问题

echarts如何不用<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>来引入echarts.min.js

### 回答1：
可以通过使用requireJS或webpack这样的模块化工具来引入echarts.min.js，例如：

1. 使用requireJS:

<!-- 在HTML中引入requireJS -->
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script>

<!-- 定义模块 -->
<script>
   define(['https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js'],function (echarts) {
       // 使用echarts
       var myChart = echarts.init(document.getElementById('main'));
       ...
   });
</script>

2. 使用webpack：

在webpack配置文件中，使用以下代码：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  externals: {
    echarts: 'echarts',
  },
}

然后在代码中直接引入echarts即可：

import echarts from 'echarts';

const myChart = echarts.init(document.getElementById('main'));
...

### 回答2：
ECharts 是一款基于 JavaScript 的数据可视化库，常规情况下，我们使用 `<script>` 标签引入 ECharts 的 JavaScript 文件。但如果不想使用 `<script>` 标签引入 `echarts.min.js`，可以采用其他方式来引入。

一种方法是使用加载器（Loader）来引入。加载器是一种通过动态加载 JavaScript 文件的工具，可以在运行时动态加载所需的脚本。常见的加载器包括 RequireJS、SystemJS 和 webpack 等。

以 RequireJS 为例，首先需要引入 RequireJS 的 JavaScript 文件，在 HTML 中添加以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.min.js"></script>

然后，在需要使用 ECharts 的地方，通过 RequireJS 的 `require` 方法来动态加载 ECharts 的 JavaScript 文件。代码如下：

require(['https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js'], function (echarts) {
  // 在这里可以使用 ECharts
});

另一种方法是使用模块打包工具，例如 webpack。首先需要安装 webpack，然后在项目中创建一个 JavaScript 文件，假设为 `app.js`，并引入 ECharts：

import echarts from 'echarts';

然后，在终端中运行打包命令：

webpack app.js bundle.js

这样会生成一个名为 `bundle.js` 的文件，其中包含了 ECharts 的代码。最后，在 HTML 中引入打包后的脚本文件：

<script src="bundle.js"></script>

以上是两种不使用 `<script>` 标签引入 ECharts 的方法，可以根据实际需求选择适合的方式来引入。

### 回答3：
要不使用`<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>`来引入echarts.min.js，可以通过以下方法来实现：

1. 通过安装NPM包：可以使用命令`npm install echarts`来安装echarts的NPM包。然后在你的项目中引入echarts，可以使用`import * as echarts from 'echarts'`来引入echarts。

2. 通过CDN链接：可以使用CDN链接来引入echarts.min.js。首先，找到echarts的CDN链接，然后将链接直接添加到你的HTML文件中，就像你使用`<script>`标签引入其他JavaScript文件一样。例如：`<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>`

3. 通过本地文件：如果你将echarts.min.js下载到本地，可以将该文件放在你的项目文件夹中的合适位置，然后使用相对路径引入该文件。例如：`<script src="echarts/echarts.min.js"></script>`。

以上是几种不使用`<script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>`来引入echarts.min.js的方法。选择其中一种方法适用于你的项目，并确保能够正确引入echarts以使用其功能。

const echarts = require("echarts") this.chart = echarts.init(document.getElementById(this.id)); 'element-ui': 'ELEMENT', 'echarts': 'echarts' echarts前段运行正常，打包后出现 echarts is not defined

这个问题可能是因为在打包后，echarts库没有被正确引入导致的。

你可以尝试以下步骤解决问题：

1. 在你的项目中安装echarts库：`npm install echarts --save`

2. 在你的webpack配置文件中添加如下代码：

const webpack = require('webpack')

module.exports = {
    // ...
    plugins: [
        new webpack.ProvidePlugin({
            echarts: 'echarts'
        })
    ]
}

这段代码会将echarts库自动注入到你的应用程序中，使其在运行时可用。

如果问题仍然存在，请检查你的HTML文件中是否正确引入了echarts库，例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My App</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script src="app.js"></script>
</body>
</html>

确保你的HTML文件中的echarts库版本与你的应用程序中使用的版本匹配。

希望这些方法可以帮助你解决问题。