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
时间: 2023-06-19 16:03:11 浏览: 57
根据你提供的代码,你设置了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>
```
相关问题
module.exports = router //module.exports = app
你的第一个问题是关于代码中的两个不同的 module.exports 赋值语句的区别。其中,第一个赋值语句将 router 对象赋值给 module.exports,而第二个赋值语句将 app 对象赋值给 module.exports。这两个赋值语句的区别在于,router 对象通常用于创建和管理路由,而 app 对象则是整个应用程序的主对象,用于处理 HTTP 请求和响应等任务。因此,如果你的代码中使用了 router 对象来处理路由,那么应该将其赋值给 module.exports。如果你的代码中使用了 app 对象来处理 HTTP 请求和响应等任务,那么应该将其赋值给 module.exports。
module.exports = router module.exports = app可以一起写吗
不能写在一起,因为 `module.exports` 只能赋值一次。当你写了 `module.exports = router` 后,`module.exports` 就只能导出 `router` 对象。如果你写了第二个 `module.exports = app`,它会覆盖前面的赋值,导致只能导出 `app` 对象,而无法导出 `router` 对象。
如果你需要同时导出 `router` 和 `app` 对象,可以将它们放在一个对象中,然后将该对象赋值给 `module.exports`。例如:
```
const express = require('express');
const app = express();
const router = express.Router();
// 定义路由
router.get('/', (req, res) => {
res.send('Hello, world!');
});
// 导出 router 和 app
module.exports = {
router,
app
};
```
这样,你就可以在其他文件中访问 `router` 和 `app` 了。例如:
```
const express = require('express');
const { router, app } = require('./my-module');
// 在 app 中使用 router
app.use('/', router);
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```