Vue 简单配置公用接口地址方式

 更新时间:2022年03月29日 14:58:05   作者:小火车况且况且况且  
这篇文章主要介绍了Vue 简单配置公用接口地址方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

简单配置公用接口地址

有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 npm run build 判断

首先配置

先新建一个 config.js 的文件

  • 开发环境: 说明在本地测试的时候链接的地址
  • 测试环境: 说明是根据 npm run test 进行判断
  • 生产环境: 说明是已经部署到线上的代码 npm run build
let baseURL = ''
if (process.env.NODE_ENV === 'production') {
    //根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境
    if (process.env.VUE_APP_TITLE === 'production') {
        //production 生产环境
        baseURL = 'http://192.168.10.111:8080/zhikong'
    } else {
        //test 测试环境
        baseURL = ''
    }
} else {
    //development 开发环境
    baseURL = 'http://192.168.10.12:8080/zhikong'
}
export default baseURL

package.json 文件下的配置

根据不同的指示来说明具体去调用哪个接口地址

{
  "scripts": {
    "serve": "vue-cli-service serve",
    // 根据不同的指示来说明具体去调用那个接口地址
    "build": "vue-cli-service build --mode build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  }
}

.env.build 和 .env.test 文件

在和 src 文件夹同级的根目录下新建 .env.build 和 .env.test 文件

.env.build

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

.env.test

NODE_ENV = 'production'
VUE_APP_TITLE = 'test'

vue.config.js 文件配置

npm run build 根据环境生成不同打包的文件夹

const path = require('path')
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    publicPath: './',
    // `npm run build` 根据环境生成不同打包的文件夹
    outputDir: process.env.VUE_APP_TITLE === 'production' ? 'dist-zhikong' : 'test',
    assetsDir: "",
    indexPath: 'index.html',
    filenameHashing: true,
    lintOnSave: false,
    runtimeCompiler: false,
    transpileDependencies: [],
    productionSourceMap: false,
    integrity: false,
    configureWebpack:{ 
        resolve:{   
            alias:{
                '@': resolve('src'),
            } 
        }
    },
    devServer:{   
        port:8080,
        host:'0.0.0.0',
        open:true,
        https:false,
        overlay: {
            warnings: true,
            errors: true
        }
    }
}

vue接口路径配置

在个人开发中,大多说vue的封装是固定形式

是写在文件中,切不可更改

例:

URL: 'http://127.0.0.1:8182/',
axios()//方式
ajax()//方式

如何在项目封装后依然可以更改?

创建文件

在根目录下创建static文件夹(现版本要放在public中,哪个行用哪个)

并创建config.json文件

{
  "name": "static",
  "version": "1.0.0",
  "url": "http://127.0.0.1:8183/",
  "dependencies": {},
}

在json中可以放版本号,项目名、后台路径、以及文件路径

axios获取json文件内容

使用async await进行同步请求

export default async function request(config) {
//public/config.json
await axios.get('static/config.json').then(res => {
    console.log(res.data.url)
    URL = res.data.url
  })
axios()//方法
ajax()//方法
}

在这样的请求的的时候,在 json文件不混乱的情况下,不需要考虑将内容提前预置在vuex缓存中,差距人的反应是感受不到的,甚至可能会因为某种原因丢失就得不偿失了 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue + canvas实现涂鸦面板的示例代码

    vue + canvas实现涂鸦面板的示例代码

    这篇文章主要给大家介绍了vue + canvas实现涂鸦面板的示例,文章通过代码示例介绍的非常详细,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • Vue的computed计算属性你了解吗

    Vue的computed计算属性你了解吗

    这篇文章主要为大家详细介绍了Vue的computed计算属性,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • vue的滚动条插件实现代码

    vue的滚动条插件实现代码

    这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 详解vue-resource promise兼容性问题

    详解vue-resource promise兼容性问题

    这篇文章主要介绍了详解vue-resource promise兼容性问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue手写实现异步更新详解

    Vue手写实现异步更新详解

    这篇文章主要介绍了Vue手写实现异步更新详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-08-08
  • vue3基于script setup语法$refs的使用

    vue3基于script setup语法$refs的使用

    这篇文章主要介绍了vue3基于script setup语法$refs的使用,<BR> 在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用script setup语法糖,原先vue2的语法已经不适用了。下面我们一起进入文章看详细内容吧</P><P>
    2021-12-12
  • vue跳转同一路由报错的问题及解决

    vue跳转同一路由报错的问题及解决

    这篇文章主要介绍了vue跳转同一路由报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue中后端做Excel导出功能返回数据流前端的处理操作

    vue中后端做Excel导出功能返回数据流前端的处理操作

    这篇文章主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue3 (五)集成HTTP库axios详情

    Vue3 (五)集成HTTP库axios详情

    这篇文章主要讲解Vue3 集成HTTP库axios的相关内容,本文讲围绕如何利用Vue3 集成HTTP库axios的相关资料展开文章,需要的朋友可以参考一下,希望对你有所帮助
    2021-10-10
  • vue3安装配置sass的详细步骤

    vue3安装配置sass的详细步骤

    sass是css的预处理器,扩展了css语言,提供了规则、变量、混入、选择器、继承、内置函数等特性,有助于减少CSS重复的代码,节省开发时间,下面这篇文章主要给大家介绍了关于vue3安装配置sass的相关资料,需要的朋友可以参考下
    2022-12-12

最新评论