vue3动态修改打包后的请求路径的操作代码

在工作中多多少少会遇到这种情况：项目打包之后，可以再次修改请求后端接口的基础地址。这就需要我们创建一个静态资源里的外部文件来实现了。

具体操作实现

public 文件夹就是存放那些不需要打包的文件，可以直接访问（静态资源），在puclic目录下新增config.js文件

window.g = {
    // 开发环境
    development: {
        BASEURL: 'http://127.0.0.1:4000',
        VERSION: '0.0.1',
        MODE: 'development',
        NODE_ENV: 'development'
    },
    //生产环境
    production: {
        BASEURL: 'http://127.0.0.1:8002',
        VERSION: '0.0.1',
        MODE: 'production',
        NODE_ENV: 'production'
    }
}

在index.html引入该文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/src/assets/image/title.ico" rel="external nofollow"  />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>xxx</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="/config.js"></script>
</body>

</html>

在封装的请求文件中对请求路径进行环境判断

import http from "../utils/http";

const baseUrl = () => {
    return process.env.NODE_ENV === "development"
        ? (window as any).g.development.BASEURL + "/api"
        : (window as any).g.production.BASEURL;
};

/**
 * @description:  预案
 * */

// 预案列表
export const getPlanList = () => {
    return http.get(`${baseUrl()}/api/plan/list`);
};

打包项目后的dist目录

我们只需对config.js 中production生产环境中的路径修改便可实现动态修改请求路径

补充：vue打包之后动态修改请求接口方法

1.可以根据自身情况封装获取配置文件接口信息

1.1我在static中新建一个config.json配置文件

{
    "DEV_URL":"/apis",//开发模式
    "BUILD_URL": "/apis"//打包之后接口
}

2.我在每次请求之前都会获取配置文件，你也可以只获取一次做下判断即可　　

//获取配置文件
async function startApp() {
    let API_URL
    if(process.env.NODE_ENV=='development'){
        let data=await Vue.http.get('/static/config.json')
        API_URL=JSON.parse(data.bodyText).DEV_URL
    }else{
        let data=await Vue.http.get('./static/config.json')
        API_URL=JSON.parse(data.bodyText).BUILD_URL
    }
    return API_URL
}

3.我封装的请求接口

async function doGet(url, req, successCallback, errorCallback) {
    let service_url=await startApp() 
    req=filterUndefined(req)
    // 每次切换页面时，调用进度条
    NProgress.start();
    Vue.http.get(service_url + url,{params:req}, {
        emulateJSON: true, //允许跨越
    }).then(function(response) {
        // 在即将进入新的页面组件前，关闭掉进度条
        NProgress.done()
        // 响应成功回调
        successCallback && successCallback(response.data);
    }, function(error) {
        // 在即将进入新的页面组件前，关闭掉进度条
        NProgress.done()
        // 响应错误回调
        errorCallback && errorCallback(error)
    });
}

到此这篇关于vue3动态修改打包后的请求路径的文章就介绍到这了,更多相关vue3打包后请求路径内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue打包路径配置过程

    Vue打包路径配置过程

    目录 Vue打包路径配置 1. 配置文件 2. 打包示例(npm/cnpm run build) 解决打包路径配置的问题 问题 原因 解决 Vue打包路径配置 1. 配置文件 module.exports = { // ...... // 相对路径都是相对于index.js所在的目录config开始的 build: { // index,assetsRoot两个路径基本不用改动,只是用于文件打包存放的路径 // index.html的路径 index: path.resolve(__dirnam

  • vue中的axios配置及接口请求路径api配置

    目录 简介 一.axios配置 二.请求接口路径api配置 三.axios和接口api的全局注入 四.请求接口的使用方式 注意 简介 关于vue中使用axios请求的配置,注意其中区分Vue2.0和Vue3.0的写法. 一.axios配置 由于可能会有多个插件应用,所以有了plugins(utils里面放的是封装的事件处理方法),自行新建相关文件 1.安装axios npm install axios --save 2.‘plugins/index.js’ 配置 // 导出所有插件 let mo

  • vue中引入路径@的用法及说明

    vue中引入路径@的用法及说明

    目录 引入路径@的用法及说明 Vue文件中引用路径的介绍 Vue中使用 vue项目路径使用@的原因 @是webpack设置的路径别名 使用场景 引入路径@的用法及说明 Vue文件中引用路径的介绍 1.路径 ./ ./当前文件同级目录 2.路径 …/ …/当前文件上一级目录 3.@符号 @ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录,避免易错的相对路径. Vue中使用 1. vue.config.js配置文件中使用   chainWebpack(config) {     conf

  • vue背景图片路径问题及解决

    vue背景图片路径问题及解决

    目录 vue背景图片路径 vue避坑之背景图片路径的添加 vue背景图片路径 共三种情况: <div class="about" :style="{backgroundImage:'url('+pic+')'}"> <div style="display: inline-block;width:36px;height: 36px;background-size: cover;background-position: center;bord

  • vue 如何实现配置@绝对路径

    目录 如何配置@绝对路径 第一种 直接使用@ 第二种 webpack.base.conf.js 第三种 vue.config.js配置 vue路径写法:./ 和 @/ 项目中还有常见的@用法 如何配置@绝对路径 第一种 直接使用@ vue项目中默认定义了@(最常用)和vue$两个别名 , @这东西代表着到src这个文件夹的路径, 下面所属目录可以直接 @/views @/components @/store @/router @/assets     ├── vue.config.js    

  • vue3动态修改打包后的请求路径的操作代码

    vue3动态修改打包后的请求路径的操作代码

    在工作中多多少少会遇到这种情况:项目打包之后,可以再次修改请求后端接口的基础地址.这就需要我们创建一个静态资源里的外部文件来实现了. 具体操作实现 public 文件夹就是存放那些不需要打包的文件,可以直接访问(静态资源),在puclic目录下新增config.js文件 window.g = { // 开发环境 development: { BASEURL: 'http://127.0.0.1:4000', VERSION: '0.0.1', MODE: 'development', NODE_

  • vue3动态路由刷新后空白或者404问题的解决

    目录 前言 实现 登出页面需要清除缓存 排错过程 总结 前言 之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~ 之前用的组件版本不知道了,回退也不知道哪个版本合适,就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0",ant-design-vue": "

  • vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

    vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

    目录 vue-cli3.0修改打包后的文件地址和文件名 问题描述 修改文件名 报错解决 vue文件夹名称修改导致错误 vue-cli3.0修改打包后的文件地址和文件名 问题描述 最近开发一个web端vue项目时使用了vue-cli3.0搭建项目目录,开发过程中一切顺利,没有遇到什么问题,开发完毕打包上线时出现了问题,打包后的文件默认在dist目录下,打开index.html时发现不能运行,报错如下: 现在有两个问题 我想修改打包后的文件夹名称: 上述报错问题的解决: 网上查询一番,发现大家都说修

  • 解决vue-cli项目webpack打包后iconfont文件路径的问题

    在使用vue-cli创建vue项目时,可以自动生成webpack文件.使用 npm run build 即可打包发布生产文件,打包后的文件 webpack配置 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.hash.css文件中. 但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题. 解决方法: 在build/utils文件中的下图所示位置添加../../

  • 关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    getCurrentInstance getCurrentInstance 支持访问内部组件实例. WARNING getCurrentInstance 只暴露给高阶使用场景,典型的比如在库中.强烈反对在应用的代码中使用 getCurrentInstance.请不要把它当作在组合式 API 中获取 this 的替代方案来使用. import { getCurrentInstance } from 'vue' const MyComponent = { setup() { const intern

  • Spring实现动态修改时间参数并手动开启关停操作

    Spring实现动态修改时间参数并手动开启关停操作

    spring实现定时任务的方式有三种,分别是java自带的timer类.spring task和quartz三种. 本文只介绍spring自带的task和第三方quartz.spirng task可以将它比作一个轻量级的Quartz,使用起来非常简单,除spring相关的包外不需要额外的包,而且支持注解和配置文件两种.接着直接演示spring task注解实现方式. 首先,创建任务类,如下: @Component public class MyScheduler { int i =0; publ

  • Vue-cli打包后如何本地查看的操作

    Vue-cli打包成dist后默认是必须在http服务器环境下才能正常运行. 可以在本地启动一个http-server服务查看,操作步骤如下: 全局安装http-server: npm install -g http-server 进入dist根目录下 cd dist 再输入指令: serve 输出serve: Running on port 5000,即服务已经启动,端口号为5000. 以其他的端口号启动: serve -p 8090 补充知识:vue cli3.0 打包并在本地查看时页面空白

  • angular2 ng build部署后base文件路径问题详细解答

    最近在学习angular2中遇到了一些问题,问题如下: 问题:使用angular-cli搭建的项目,执行ng build后,浏览器打开空白,发现文件的路径不对 解决方案: 在package.json文件的scripts中添加命令: "build":"ng build --base-href ./" –base-href后面替换成打包后的base路径 执行: npm run build 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • Android编程动态修改RelativeLayout宽高的方法

    Android编程动态修改RelativeLayout宽高的方法

    本文实例讲述了Android编程动态修改RelativeLayout宽高的方法.分享给大家供大家参考,具体如下: 我们经常会动态修改RelativeLayout的宽高,这样的代码,比较简单,就是修改Relativelayout的LayoutParams就可以．代码一般如下: RelativeLayout ss = (RelativeLayout) findViewById(R.id.myRelativeLayout); ss.setLayoutParams(new RelativeLayout.

  • nuxt+axios实现打包后动态修改请求地址的方法

    需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译. 这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包.功能不变时,单单是修改一下请求地址省了不少功夫. 1.开始 把需要动态修改的配置写在一个配置json文件里面.该配置文件可以放在static目录下: 静态文件目录:静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理. 服务器启动的时候,该目录下的文件会映

随机推荐