在项目中api管理需要用到全局变量,创建全局变量的方式也有很多。

1.通过export default

  const BASEURL = "http://localhost:3333/"
  const URL = {
    getCategory:BASEURL+'category',
    getGoodsInfo:BASEURL+'getGoodsInfo'
  }
  export default URL
  在入口文件中引入

  import url from './api/api'

  Vue.prototype.URL=url;

2.通过module.exports

const BASEURL = "http://localhost:3333/"
const URL = {
getCategory:BASEURL+'category',
getGoodsInfo:BASEURL+'getGoodsInfo'
}

module.exports = URL;

在入口文件中引入Vue.prototype.URL=require('./api/api.js');

其实以上两种都是Vue.prototype原型引入;

3.通过node.js的global全局变量

global.apiBase={}
apiBase.baseUrl='http://localhost:3333/'

apiBase.getBanner="/banners"
apiBase.getcategory="/category"

export default {
  apiBase
};

在路口文件中直接引入

import  ApiBase from './api/api'

4.通过VUEX的状态管理

   import Vue from 'vue';

   import Vuex from 'vuex';Vue.use(Vuex);

const state = {}

  直接定义在state状态里面

5.通过window对象设置

 

vue项目中全局配置变量的更多相关文章

  1. Vue 项目中 ESlint 配置

    前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...

  2. rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签

    在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...

  3. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  4. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  5. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  6. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  7. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  8. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  9. vue项目中使用bpmn-自定义platter

    前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我们本次要实现的目标 ...

随机推荐

  1. Vagrant 入门指南

    https://blog.csdn.net/qianghaohao/article/details/80038096 https://blog.csdn.net/happyhorizion/artic ...

  2. 983. Minimum Cost For Tickets

    网址:https://leetcode.com/problems/minimum-cost-for-tickets/ 参考:https://leetcode.com/problems/minimum- ...

  3. 微信小程序 wx.request

    onLoad: function () { var that = this console.log('https://free-api.heweather.com/s6/weather?locatio ...

  4. LInux下几种定时器的比较和使用

    在数据通信过程中,会遇到对数据发送时间的格式要求.所以要在应用中根据实际要求选择不同的定时器,就要考虑到几种应用定时器的特点. 定时器文章参考 一般而言有, 1.sleep,usleep和nanosl ...

  5. 从零开始学Python 三(网络爬虫)

    本章由网络爬虫的编写来学习python.首先写几行代码抓取百度首页,提提精神,代码如下: import urllib.request file=urllib.request.urlopen(" ...

  6. 老男孩九期全栈Python之基础一

    ---恢复内容开始--- day1 12.while 体验while的执行方式和效果,用多种方法输出1~100 while 1: print('我们不一样') print('在人间') print(' ...

  7. SharePoint CU、Hotfix和SP版本的区别

    1.Hotfix:通常是对一个特殊问题的修复包 2.CU(Cumulative Update):Hotfix的集合,包含从上一个SP(Service Pack)版本以来所有的Hotfix 3.SP(S ...

  8. Jsp的table导出Excel

    var idTmr; function getExplorer() { var explorer = window.navigator.userAgent ; //ie if (explorer.in ...

  9. 多线程之 Thread类

    一.多线程第一种方式的实现步骤(继承Thread类) 代码演示: 1.定义MyThread类,继承Thread类 2.重写了里面的run方法,在run方法中定义线程要执行的任务 public clas ...

  10. python列表的学习笔记

    列表的操作 第一个例子: #names = "zhangyang guyun xiangpeng xuliangchen"  #通过空格或逗号存变量 names = [" ...