vue3.0 外部配置文件二 (axios方式)

vue3.0 外部配置文件，重点是打包后也可以 修改配置参数

 axios方式有两个缺点：

1.读取配置参数是用 axios请求 所以要比程序加载慢些。有时会出现程度加载完毕后要等1秒左右才能读到配置参数

2.最重要的缺点是 axios方式，编译后必须放在Apache(或其它服务)的www目录下用 地址访问，用文件直接打开读不到参数。

一、在public中创建 static 文件夹，在static文件夹中创建config.js文件

config.js

{
    "webSocketUrl": "http://192.168.1.5:5011/httpCli" 
}

二、在 man.js 中 使用 axios 来读取

存在 app.config.globalProperties.$webSocketUrl 变量中

import { createApp } from 'vue'
import { reactive } from 'vue'

import App from './App.vue'
import axios from 'axios'

//createApp(App).mount('#app')

const app = createApp(App);
app.config.globalProperties.$axios = axios;

 
//读配置文件
function getServerConfig () {
  return new Promise ((resolve, reject) => {
    axios.get('static/config.json').then(data => {
      app.config.globalProperties.$webSocketUrl = data.data.webSocketUrl;
      console.log('读配置文件url',app.config.globalProperties.$webSocketUrl)
      resolve();
    }).catch(error => {
      console.log(error);
      reject()
    })
  })
}

//初始化
async function init() {
  await getServerConfig();
}

//执行初始化
app.use(init);

app.mount('#app');

在模板页中直接使用即可

console.log("参数："+this.$webSocketUrl);