在Vue中使用echarts/axios，解决“TypeError: Cannot read property ‘....‘ of undefined”报错

console.log（this.$echarts）console.log（this.$axios）你会发现，打印出来是undefined,为什么呢？去看看 main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'import axios from 'axios'im

奶油泡芙CC

1489人浏览 · 2021-11-20 20:45:46

奶油泡芙CC · 2021-11-20 20:45:46 发布

console.log（this.$echarts）
console.log（this.$axios）

你会发现，打印出来是undefined,为什么呢？

去看看 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import * as echarts from 'echarts'
import "../public/static/css/global.css"
const app=createApp(App).use(router).mount('#app')
app.config.globalProperties.$axios=axios
app.config.globalProperties.$echarts=echarts

vue实例和id名为app的div关联了，已经去加载页面了，然后再定义全局变量，当然获取不到echarts/axios对象

正确写法：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import * as echarts from 'echarts'
import "../public/static/css/global.css"
const app=createApp(App).use(router)
app.config.globalProperties.$axios=axios
app.config.globalProperties.$echarts=echarts
app.mount('#app')