当前位置: 首页 / 网站建设 / 正文

vue/uniapp如何定义全局变量供其他页面调用

发布时间:2020-12-18 14:05:42 作者:小超越君 33 次浏览

使用uniapp开发项目的时候,很多时候我都需要定义一些全局变量,用于其他页面的调用,这样方便后续的维护。
uniapp实际上就是vue语法,所以写法是一样的。废话少说,维持小超越一贯的作风,直接上演示。

场景:有生产和开发的环境,不同的环境需要调用不同的接口地址。

步骤一、在根目录创建ENV.js文件,文件名你们可以自定义

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
全局配置文件
*/
let ENV_API_URL={
 develop:'这里填写开发环境的接口地址',//开发环境接口
 production:'这里填写生产环境的接口地址'//生产环境接口
}
let url=ENV_API_URL.develop;
if(process.env.NODE_ENV === 'development'){
   
      url=ENV_API_URL.develop;
  console.log('开发环境');
}else{
   
  url=ENV_API_URL.production;
  console.log('生产环境');
}
export const API_URL=url;

备注:系统会自动判断编译环境,然后输出对应的api接口网址

步骤二、在根目录main.js文件内引用env.js 并赋值全局变量

代码

1
2
import {API_URL} from './env.js'
Vue.prototype.$API_URL=API_URL;

备注:现在引用了env.js文件里的API_URL变量。并且赋值给全局变量$API_URL。

步骤三、在pages目录里,任意vue文件调用$API_URL

用法:this.$API_URL

总结:首先创建一个文件用于管理配置文件,然后再main.js文件里引用并定义全局变量,然后再需要调用的地方进行调用该全局变量名即可。

转载请保留本文链接:https://www.zhe94.com/848.html

小超越
热爱折腾,曾想着改变世界,如今只能向生活低头,寻找可口的牛奶和面包
添加站长微信作者头像
专注高品质湛江网站建设及湛江SEO优化服务 立即咨询