vue3 创建config文件 定义全局变量

目录

简述

创建 src/config  文件夹   在创建 index.js 文件

main.js  全局变量定义

 测试效果  

---

简述

前面完成了 element plus 的引入， 简单路由的创建， 简单 layout 布局设置

现在 创建一个 config文件  存放一些全局 变量 方便后续代码使用

创建 src/config  文件夹   在创建 index.js 文件

const DEFAULT_CONFIG = {

  // 标题

  APP_NAME: "APP_NAME",

  // 版本号

  APP_VER: "1.0.0",

  // 内核版本号

  CORE_VER: "1.0.0",

  // 接口地址

  API_URL: "http://0.0.0.0:8000/api",

  // 请求超时

  TIMEOUT: 10000,

  // TokenName

  TOKEN_NAME: "Token",

  // Token前缀，注意最后有个空格，如不需要需设置空字符串

  TOKEN_PREFIX: "",

  // 追加其他头

  HEADERS: {},

  // 请求是否开启缓存

  REQUEST_CACHE: false,

  PUBLIC_KEY: "",

}

export default DEFAULT_CONFIG

main.js  全局变量定义

 app.config.globalProperties.$ = $

 测试效果  

在 home.vue  文件 

<template>

  <div><label> config  参数</label>

    <ul>

      <li><label> APP_NAME: </label>

        {{ systemConfig.APP_NAME  }}</li>

      <li><label> APP_VER: </label>

        {{ systemConfig.APP_VER  }}</li>

      <li><label> CORE_VER: </label>

         {{ systemConfig.CORE_VER  }}</li>

      <li><label> API_URL: </label>

        {{ systemConfig.API_URL  }}</li>

    </ul>

  </div>

</template>

<script setup >

import systemConfig from "@/config";

console.log(systemConfig)

</script>

<style ></style>