在项目中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. PHP反射学习总结

    反射(Reflection) PHP的反射机制提供了一套反射API,用来访问和使用类.方法.属性.参数和注释等,比如可以通过一个对象知道这个对象所属的类,这个类包含哪些方法,这些方法需要传入什么参数, ...

  2. javascript高级程序设计第3版——第3章 基本概念

  3. Laravel 利用中间件控制权限。

    1.把所有需要控制的url写到config/admin.php里. 2.http/kernel.php文件里加上中间件. 3.http/Middleware/Permission.php 4.视图层

  4. F7+vue 物理返回键监听使用

    以前使用的是纯F7,这个项目加了Vue进去,但碰到了一个问题,就是这样监听不到安卓物理键的返回,它是点击返回,直接推出程序,这个坑有点深,查了不少资料也问了不少人,最后在网上看到了别人的写的,自己也改 ...

  5. week4_1

    ---恢复内容开始--- _________________________________列表生成式_____________________ a = [a*2 for a in range(10) ...

  6. Spring-----AOP-----事务

    xml文件中: 手动处理事务: 设置数据源 <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooled ...

  7. SQL优化清单

    SQL优化清单 1.from 语句中包含多个表的情况下,把记录数少的表放在前面 2.where 语句中包含多个条件时,将刷选多的条件放前面 3.避免使用select * ,因为这样会去查询所有列的数据 ...

  8. font-family 中文字体列表

    华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 儷黑 Pro:LiHei Pro ...

  9. 用tensorflow实现最简单的神经网络

    import tensorflow as tfimport numpy as np def add_layer(inputs,in_size,out_size,activation_function= ...

  10. shell_base

    1.使用if_then语句if command then commands fi 先运行if后面的命令,如果命令的退出状态是0(成功执行命令),就将执行then后面,fi前面的所有命令.否则就跳到fi ...