Vue 配置全局变量

配置全局变量实践

最新推荐文章于 2023-11-03 14:12:14 发布

原创最新推荐文章于 2023-11-03 14:12:14 发布 · 1.6k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

Vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种在项目中创建和使用全局变量的方法。通过在src目录下建立config文件夹及index.js文件来定义全局变量，并在main.js中将这些变量挂载到Vue原型上实现全局访问。这种方式便于统一管理和维护API地址等常用配置。

文章目录

1.创建config文件
2.挂载到全局
3.使用变量

1.创建config文件

src下创建config/index.js文件

//定义全局变量
const rootUrl = 'http://192.168.0.46'
const globalUrl = {
	rootUrl: rootUrl,
	semanticSearchUrl: rootUrl + ':8001/search/semantic',
	detailUrl: rootUrl + ':8001/detail',
	summaryUrl: rootUrl + ':8002/summary',
	transformUrl: rootUrl + ':8003/transform',
	keywordPickUrl: rootUrl + ':8004/keywordpick'
}

// 暴露对象
export {
    globalUrl
}

2.挂载到全局

src/main.js中挂载变量

// 挂载全局变量 -----------------------------------
import { globalUrl } from './config';
Vue.prototype.globalUrl = globalUrl
// ----------------------------------------------