vue3.0 外部配置文件

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

 
一、在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);