1

我有一个全局混合，除了在App.vue.This mixin 应该加载一个 Yaml 配置文件并使其在任何地方都可用。

所以问题是¿为什么它只在其中不起作用App.vue以及如何解决它？

主.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import Vuelidate from 'vuelidate'
import yaml from 'js-yaml'
import fs from 'fs'
Vue.use(Vuelidate)
import { BootstrapVue } from 'bootstrap-vue'

import {
  BIcon,
  BIconChevronDoubleDown,
  BIconChevronDoubleUp,
  BIconEyeFill,
  BIconEyeSlashFill
} from 'bootstrap-vue'


Vue.use(BootstrapVue)
Vue.component('BIcon', BIcon)
Vue.component('BIconChevronDoubleDown', BIconChevronDoubleDown)
Vue.component('BIconChevronDoubleUp', BIconChevronDoubleUp)
Vue.component('BIconEyeFill', BIconEyeFill)
Vue.component('BIconEyeSlashFill', BIconEyeSlashFill)

Vue.prototype.$axios = axios 
Vue.config.productionTip = false

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.mixin({
  data() {
    return {
      ebaConfig: null,
      publicPath: process.env.BASE_URL
    }
  },
  methods: {

    async loadEbaConfig() {
      const config = await axios.get(`${this.publicPath}config.yaml`)
      const doc = yaml.load(config.data)
      this.ebaConfig = doc
    }

  },
  created() {
    this.loadEbaConfig()
  }
})

export const app = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

yaml 文件：

btnRedirectUrl: "www.google.com/"
btnRedirectText: "google"

应用程序.vue：

<template>
  <div id="app">
    ...
    <b-button id="redirect" size="sm">{{btnRedirectText}}</b-button>
    ...
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import router from "./router";
import {app} from "./main.js";

export default {
  data() {
    return {
      ...
      btnRedirectText: app.ebaConfig.btnRedirectText,
      ...
    };
  },
  computed: {
    ...
  },
  methods: {
    ...
  },
};
</script>
<style scoped>
...
</style>

这是错误： 错误信息截图

解决方案我试过了，仍然没有解决这个问题

应用程序.vue：

  data() {
    return {
      btnRedirectText: "",      
    };
  },
...
  mounted(){
    this.btnRedirectText = app.ebaConfig.btnRedirectText;
  }

但我仍然得到未定义的错误：

[Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading 'ebaConfig')"

found in

---> <App> at src/App.vue
       <Root>
4

0 回答 0