首页 > 其他分享 >Vue2项目中,在编译打包后通过读取配置文件,任意修改接口地址

Vue2项目中,在编译打包后通过读取配置文件,任意修改接口地址

时间:2023-05-10 17:14:55浏览次数:48  
标签:Vue 读取 配置文件 接口 js Vue2 全局变量 config

可以按照以下步骤进行操作:

 

1. 在项目根目录下创建一个名为`config`的文件夹,并在该文件夹下创建一个名为`index.js`的文件,用来存放配置文件,如:

 

```javascript

module.exports = {

  apiRoot: 'http://api.example.com'

}

```

 

这里定义了一个`apiRoot`属性,用来存放接口地址。

 

2. 在代码中读取配置文件,并将配置文件中的属性设置为全局变量。可以在`main.js`文件中引入配置文件,然后在Vue实例中将配置文件中的属性设置为全局变量,如:

 

```javascript

// main.js

import Vue from 'vue'

import App from './App.vue'

import config from '../config'

 

Vue.config.productionTip = false

 

Vue.prototype.$config = config // 将配置文件设置为全局变量

 

new Vue({

  render: h => h(App),

}).$mount('#app')

```

 

这里使用`Vue.prototype.$config`来将配置文件设置为全局变量,以便在整个Vue应用程序中都可以使用。

 

3. 在代码中使用全局变量来配置接口地址,如:

 

```javascript

// 在api.js中

import axios from 'axios'

 

const api = axios.create({

  baseURL: Vue.prototype.$config.apiRoot // 读取配置文件中的接口地址

})

 

export default api

```

 

这样,在打包后任意修改接口地址时,只需要修改`config/index.js`文件中的`apiRoot`属性即可。同时,由于配置文件不会被压缩,因此在编译打包后也可以轻松地修改配置文件。

标签:Vue,读取,配置文件,接口,js,Vue2,全局变量,config
From: https://www.cnblogs.com/gaosj20210301/p/17388508.html

相关文章

  • java读取文件——以自动贩卖机为例
    上一篇做自动售卖机时用的是初始化定义商品列表,但实际上每一次启动售货机时售货机显示的是上一次购买结束后的库存。我们用一个.txt记录一下库存,然后利用File类将数据读取出来展示。我这里设置了一个商品就为一行,名称占12个字节,价格是4个字节,数量是11个字节,再加上转行符读取文......
  • SpringBoot 配置文件加载优先级
    我们在使用springboot开发的时候,经常会从外部获取属性值,为了记住这些规则,特此做如下记录~~~一、为什么要做外部化配置本地开发的时候,上传文件的时候,每个人想上传的路径不一样,使用外部配置,就可以单独设置自己的上传路径项目部署的时候,不同的环境使用不同的配置,使用外部挂载配置这......
  • 关于arcgis和postgresql数据库创建企业级地理数据库的配置文件
    第一:需要将arcgis的C:\ProgramFiles(x86)\GeoScene\Desktop\Desktop10.8\DatabaseSupport\PostgreSQL\12\Windows64这个路径下的文件拷贝到postgresql数据库的安装目录的lib文件夹中;第二:需要将五个文件libeay32.dll、libiconv-2.dll、libintl-8.dll、libpq.dll和ssleay32.d......
  • vue2+vant2+rem+axios+钉钉自动登录 h5模板
    下载代码请轻轻的点一下这里~Node版本要求VueCLI需要Node.js8.9或更高版本(推荐8.11.0+)。你可以使用nvm或nvm-windows在同一台电脑中管理多个Node版本。本示例Node.js14.17.0启动项目npminstallnpmrundev打包项目打测试包会带vconsole控制台对......
  • Vue2--入门学习
    看了慕课网的教学视频,觉得挺不错的,在此做个随堂记录,有兴趣的可以去看视频vue版本:2.5文档链接:https://v2.cn.vuejs.org/v2/guide/installation.html视频链接:https://www.imooc.com/video/16976 在vue官网下载开发版本的vue.js,并复制其代码到编译器中创建的vue.js文件中 ......
  • MyBatis逆向工程配置文件及一些配置解释(跑通)
    <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEgeneratorConfigurationPUBLIC"-//mybatis.org//DTDMyBatisGeneratorConfiguration1.0//EN""http://mybatis.org/dtd/mybatis-generator-config_1_0.d......
  • 【configparser】Python解析配置文件的模块使用总结
    简介configparser是Pyhton标准库中用来解析配置文件的模块,并且内置方法和字典非常接近。Python2.x中名为ConfigParser,3.x已更名小写,并加入了一些新功能。调用importconfigparserconfig=configparser.ConfigParser()config.read("config.ini")常用方法#获取所用......
  • ZLMediaKit报错,程序启动失败,请修改配置文件中端口号后重试!
    报错信息如下:2023-05-0910:33:22.819W[MediaServer][13423-MediaServer]sockutil.cpp:421bind_sock6|Bindsocketfailed:addressalreadyinuse2023-05-0910:33:22.819W[MediaServer][13423-MediaServer]main.cpp:366start_main|端口占用或无权限:Listenon:......
  • 钉钉PC端使用 Blazor WebAssembly 读取用户信息
    功能:在钉钉内打开BlazorWebAssembly网站时,读取钉钉当前的用户信息,并显示启用的功能列表版本:.NET6界面库:AntDesignBlazor基础要求:1.让公司管理员设置自己为钉钉开发者2.下载钉钉RC版作为调试工具,下载地址:https://open.dingtalk.com/document/resource......
  • uniapp读取本地通讯录
    官方文档:https://uniapp.dcloud.net.cn/api/system/contact.html#addphonecontactcreated(){//#ifdefAPP-PLUSthis.getLocalContact()//#endif},methods:{getLocalContact(){lettype=plus.contacts.ADDRESSBOOK_PHONEplu......