Vue3中常量的正确存储位置在哪？如何定义可全局复用的API常量？

你可以按照以下步骤实现，两种使用方式按需选择即可：

1. 抽离独立常量文件 #

首先不要把常量直接写在组件内部，在项目src目录下新建专门存放常量的目录，比如src/constants，在目录下新建api.js存放接口相关固定值：

// src/constants/api.js
export const MyApiUrl = 'https://namerandomlarge.api.com/'

这种抽离方式的好处是后续如果API地址变更，只需要修改这一处文件，不需要全项目搜索替换。

2. 两种调用方式选其一 #

方式一：按需引入（推荐，无全局污染） #

不需要额外做全局注册，在任意组件、工具方法文件中，直接导入常量即可使用：

// 任意组件、普通js/ts方法文件内
import { MyApiUrl } from '@/constants/api'

// 调用示例
// 发请求时拼接地址
fetch(`${MyApiUrl}/getList`).then(res => res.json())

方式二：全局挂载（适合高频使用场景，省去重复import） #

如果这个地址使用频率极高，不想每次都写导入语句，可以在项目入口文件（通常是main.js/main.ts）把常量挂载到全局，以Vue3项目为例：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import { MyApiUrl } from '@/constants/api'

const app = createApp(App)
// 挂载到全局属性
app.config.globalProperties.MyApiUrl = MyApiUrl
app.mount('#app')

挂载完成后，选项式API的组件methods中可以直接通过this.MyApiUrl访问：

export default {
  methods: {
    loadData() {
      console.log(this.MyApiUrl) // 直接输出目标API地址
    }
  }
}

Vue2、React等其他框架/技术栈逻辑一致：抽离常量后，要么按需引入，要么在入口处挂载到框架对应的全局属性上即可。

内容的提问来源于stack exchange，提问作者TodMcfRle