Vue3+TS全局配置信息外放，axios读取配置信息，动态挂载，实现一客户一配置文件

        环境：vite+ts+vue3.2+axios+vuex+vue-router

        我们做一套代码，可能需要卖给N多客户，可能很多客户都会给软件冠名，AXXX系统，BXXX系统，我们的软件已经做完了，没必要卖给一个客户改个名称发布一次，所以我们把软件名称外放到一个配置文件config.json中，卖一次，配置一下config.json文件就可以了，这样有一个好处是，我们可以保证每个客户有自己独立的config.json文件，并且里面定义的内容都是他们自己风格的，变量再多，我们也不必发布一次编译一次，程序更新的时候，我们保证不覆盖客户的config.json文件即可。

        config.json:放在public文件夹下，路径/public/config.json，

名称释义：***sitename：系统名称，version：版本号***，有其它配置项，也可以加入，自定义值

内容如下：

{

"sitename": "AXXX应用系统",

 "version": "2.0.00023"

}

        SiteConfigInfoInterface.ts,路径/src/tstypes/SiteConfigInfoInterface.ts,功能是定义配置类型，有其它内容也可以加入，名称和类型一致即可

内容：

//站点基本配置信息

export interface SiteConfigInfo {

   //版本号

    version: string,

    //站点名称

    sitename: string

}

        main.ts  为了方便演示，没对axios进行封装

内容如下：

import { createApp } from 'vue'

import App from './App.vue'

import store from './store'

import { SiteConfigInfo } from './tstypes/SiteConfigInfoInterface'

import axios from 'axios'

const app = createApp(App)

axios.create({

    timeout: 5800,

    headers: {

        "Contect-Type": "application/json;chartset=utf-8;"

    }

}).request({

    baseURL: "/config.json"  //public文件夹下的读取路径

}).then((res) => {

    //动态加载配置数据

    const sfi: SiteConfigInfo = res.data;

    //控制台显示读取到的配置文件内容

    console.info(sfi);

     //保存在vuex的store.state中

    store.state.siteConfigInfo = sfi;

   //挂载app

    app.use(store).use(router).mount('#app')

    //设置浏览器标题栏内容，这样就不是英文的工程名称了

    document.title = sfi.sitename;

}).catch((error) => {

    console.log('取配置信息错误', error)

})

App.vue中使用：

<template>

  {{store.state.siteConfigInfo.version}}

  <router-view />

</template>

<script setup lang="ts">

import { useStore } from 'vuex';

const store = useStore();

</script>