解决Vue打包echarts无法显示的问题

为减小Vue项目打包大小，采用cdn方式引入echarts。跟着我的步骤做，就不会出现打包后无法显示的情况。

1、采用CDN引入echarts，在项目的public中的index.html中引入CDN

<!-- 引入echarts CDN脚本 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script><!-- 引入lodash CDN脚本,用于数据合并 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

2、在vue.config.js中的发布模式下，设置打包时排除echarts本地项目依赖的包。

chainWebpack: config => {// 发布模式config.when(process.env.NODE_ENV === 'production', config => {config.entry('app').clear().add('./src/main_prod.js')config.set('externals', {vue: 'Vue','vue-router': 'VueRouter',axios: 'axios',lodash: '_',echarts: 'echarts','vue-quill-editor': 'VueQuillEditor'})config.plugin('html').tap(args => {args[0].isProd = truereturn args})})// 开发模式config.when(process.env.NODE_ENV === 'development', config => {config.entry('app').clear().add('./src/main_dev.js')config.plugin('html').tap(args => {args[0].isProd = falsereturn args})})}

3、在vue页面中加入引用

import * as echarts from 'echarts'
import _ from 'lodash'

4、查询数据库，并与渲染设置合并，注意echarts渲染要挂载在mounted函数里，因为要等 dom 读取完后才能设置echarts数据。

export default {data () {return {options: {title: {text: '用户来源'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#72a8fa'}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{boundaryGap: false}],yAxis: [{type: 'value'}]}}},created () {},mounted () {this.$nextTick(() => {this.initChart()})},methods: {async initChart(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'))// 获取数据const { data: res } = await this.$http.get('reports/type/1')if (res.meta.status !== 200) {this.$message.error('数据获取失败！')}console.log(res.data)// 指定图表的配置项和数据,合并数据var option = _.merge(res.data, this.options)// 使用刚指定的配置项和数据显示图表。myChart.setOption(option)}}
}
</script>

根据以上步骤，打包后就能实现echarts图表了，并且占用资源很小。