打包后定义配置文件针对.vue和.js文件不同配置方法

news2024/9/29 23:28:22

        条件:需要打包后形成config文件,在打包后改变此配置文件即可改变配置,如api地址,vue中方法参数和条件。

        (1)首先config文件要在public文件中建立,webpack打包后config文件才会出现在打包的dist文件中。

        (2)针对你需要在config中配置.vue和.js文件需要不同的暴露和引入方式,才能实现打包后开启的前端服务在每次刷新都读区config中的配置。    

.vue

        1.在publuc文件中创建config.json文件。

        2.在config.json写入类似代码:

{
    "href":"https://www.baidu.com"
}

        3.在mian.js中全局注册href (异步)               

import axios from 'axios'

function getServerConfig() {
  return new Promise((resolve, reject) => {
    axios
      .get("/config.json")
      .then(result => {
        Vue.prototype.$href = result.data.href;
        resolve();
      })
      .catch(error => {
        console.log(error);
        reject();
      });
  });
}

        4.使用参数,如:

handleLogin() {
      setTimeout(() => {
          console.log(this.$href)
      },0)
}

        打包后dist文件中会出现config.json。改变json中的href即可让handleLogin()方法打印你修改的href的参数的值。

 .js

        1.在public文件中创建config.js文件。

        2.在config.json写入类似代码:

window.PLATFROM_CONFIG = {
    baseURL: "http://1.2.3.4:8080"
}

        3.在pulic文件中的index.html中引用:

<script src="./configs.js"></script>

         4.在js文件中使用(这里举例若依的request.js):

const service = axios.create({
  // axios中请求配置有baseURL选项,表示请求URL公共部分
  baseURL: window.PLATFROM_CONFIG.baseURL,//这里这里
  // 超时
  timeout: 10000
})

        5.打包后dist文件中会出现config.js。改变js中的baseUrl即可让若依封装的axios中的baseURL变化,从而请求不同的地址。(或者其他需要根据不同情况改变js值的地方用到)、

肯定还有更好的方法,俺是真研究不出来了😭

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/545567.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringMVC第四阶段:Controller中如何接收请求参数

Controller中如何接收请求参数 1、原生API参数类型 1.1、HttpServletRequest类 只需要在Controller的目标方法中, 直接写上HttpServletRequest对象即可获取 原生API的 request对象实例。 RequestMapping(value "/p1") public String param1(HttpServletRequest …

( 动态规划) 1035. 不相交的线 ——【Leetcode每日一题】

❓1035. 不相交的线 难度&#xff1a;中等 在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数。 现在&#xff0c;可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线&#xff0c;这些直线需要同时满足满足&#xff1a; nums1[i] nums2[j]且绘制的直线不…

Postman如何做接口测试?你居然还不知道

目录 Postman如何做接口测试1&#xff1a;如何导入 swagger 接口文档 Postman如何做接口测试2&#xff1a;如何切换测试环境 Postman如何做接口测试3&#xff1a;什么&#xff1f;postman 还可以做压力测试&#xff1f; Postman如何做接口测试4&#xff1a;如何自动添加请求…

辅助驾驶功能开发-功能规范篇(16)-2-领航辅助系统NAP-自动变道-2

书接上回 2.3.4.3 系统主动变道 (1)变道需求输入 在NOA功能功能激活状态下,系统接收驾驶员请求或根据导航引导信息及道路环境信息获取变换车道的需求,包含导航引导路线的变道需求和智能避让变道需求。 导航引导变道需求 导航引导模式下的主动变道包括上高速由匝道并入主路、…

【前端知识】浅谈XSS和CSRF网络攻击

【前端知识】浅谈XSS和CSRF网络攻击 1. 常见的浏览器攻击2. XSS攻击2.1 定义2.2 类型2.2.1 Reflected XSS【反射型 - 非持久型 XSS】2.2.2 Stored XSS【存储型 - 持久型 XSS】2.2.3 DOM-based or local XSS【基于DOM或本地的XSS &#xff0c;非持久性】2.2.4 其他类型XSS攻击 2…

Python入门(十)用户输入

用户输入 1.概述2.函数input()的工作原理2.1 编写清晰的程序 3.使用int()来获取数值输入4.求模运算符 作者&#xff1a;xiou 1.概述 大多数程序旨在解决最终用户的问题&#xff0c;为此通常需要从用户那里获取一些信息。例如&#xff0c;假设有人要判断自己是否到了投票年龄。…

从C语言到C++_11(string类的常用函数)力扣58和415

目录 1. 学习string的铺垫 1.1 什么是string类 1.2 basic_string 模板类 1.3 编码表的由来 1.4 其它字符编码的string 2. string类对象的常见构造 3. sting类对象的容量操作 4. string类对象的访问及遍历操作 5. string类对象的修改操作 6. string类非成员函数 7. …

Unity之新版输入系统InputSystem如何自定义InputActions

一.前言 上一篇文章,我们介绍了如何使用新版本的InputSystem,我们知道了InputActionsAsset给我们提供了更多的灵活性,扩展性和复用性。那么这篇文章我们就来介绍一下如何创建自定义InputActionAsset 二.创建ActionAssets Input Action Asset 包含输入 Actions及其关联的B…

活动回顾|Kyligence x 亚马逊云科技,携手加速零售电商数智化转型

5月19日&#xff0c;Kyligence 与亚马逊云科技联合主办的「指标驱动&#xff0c;加速零售电商行业数智化转型」主题沙龙在上海成功举办。来自乐高、Kyligence、亚马逊云科技的专家分享了如何以数据和指标驱动&#xff0c;加速零售行业的数智化转型&#xff0c;并与现场观众进行…

【92】实测:访问不存在的function导致UR

前言 协议规定访问不存在的function会导致UR&#xff0c;今天我们就来实测一下。 这篇文章主要设计下面几个方面&#xff1a; 1、X86上的memory config 2、config方式访问不存在的设备导致UR 3、UR和advisory non fatal转换 4、header log解析 一、协议规定 协议规定如果…

SPI总线通讯协议学习

目录 什么是SPI 信号线 理解通讯原理 采样 SPI的推广 什么是SPI SPI是芯片与芯片之间的通讯,准确得说是串行同步通讯。既然都说了同步&#xff0c;那发送数据当然要和时钟线SCK配合才能发数据. 采用一主多从的模式&#xff0c;主机只有一个,而从机可以有若干个。 信号线 …

Java面试知识点(全)-Java并发-多线程JUC三- JUC集合/线程池

Java面试知识点(全) 导航&#xff1a; https://nanxiang.blog.csdn.net/article/details/130640392 注&#xff1a;随时更新 JUC集合类 为什么HashTable慢? 它的并发度是什么? 那么ConcurrentHashMap并发度是什么? Hashtable之所以效率低下主要是因为其实现使用了synchro…

学习开源项目消息推送平台需要什么基础?

有很多人问过我&#xff0c;学习开源项目消息推送平台austin需要有什么基础&#xff0c;我往往会回答&#xff1a;有SpringBoot基础就够了。 我在几年前总结过从零学习Java的路线&#xff0c;现在看来也没有很过时&#xff1a; Java基础&#xff1a;流程控制–>面向对象(包…

文件上传,解析漏洞编译器安全(23)

apache低版本解析漏洞 这个网站目录里有两个文件&#xff0c;一个是正常的php文件&#xff0c;另一个xx.php.xxx&#xff0c;源码是php源码&#xff0c;命名的文件&#xff0c;而访问中xxx的文件依旧可以执行出php代码的结果&#xff0c;而xxx就能当php文件解析&#xff0c;这…

【Linux】shell脚本编程

C/C与shell的区别 C/C是编译型 编译链接xx.c->xx 二进制机器指令 shell编程解释型 xx.sh 需要解释器&#xff08;如&#xff1a;bash&#xff09; Java 解释器编译 xx.java->xx.class 配置环境 输出一个hello my.sh #!/usr/bin/bash/echo"hello"ex…

php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示

php中Ajax的简单使用 jQuery中如何使用Ajax&#xff1f; jQuery 中封装了两个方法 get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 两种在客户端和服务器端进行请求-响应的常用方法是&#xff1a;GET 和 POST。 GET - 从指定的资源请求数据POST - …

Postman集合/文件夹/请求中脚本的执行顺序

Postman的Collection(集合)/Folder(集合的子文件夹)/Request(请求)中都有Pre-request Script(请求前脚本)和Tests(请求后脚本) 这个功能类似于不同范围的Test Fixture功能, 我们来探索3个问题: 脚本的执行顺序?保存在集合/子文件夹中的请求单独发送时是否会执行 集合以及子文…

css自定义变量

文章目录 学习链接1.什么是CSS变量?2.如何定义CSS变量?定义CSS变量示例 3.如何使用CSS变量?使用示例 4.CSS变量可以干什么用?1. 提取相同的属性值风格切换简单案例index.htmlindex.css 2. 简化相似的代码案例实现1案例实现2index.html index.css 5.作用域问题案例index.htm…

【数据结构】--单链表力扣面试题③找链表的中间节点

目录 法一&#xff1a;遍历链表法 法二、快慢指针法 题述&#xff1a;给定一个头结点为head的非空单链表&#xff0c;返回链表的中间节点。如果有两个中间节点&#xff0c;则返回第二个中间节点。 示例1&#xff1a; 输入&#xff1a;【1,2,3,4,5】 输出&#xff1a;此链表…

〖Web全栈开发④〗— HTML基础详讲(超详细)

HTML基础详讲 &#xff08;一&#xff09;HTML基础1.1浏览器发展史1.2浏览器的诞生和发展 &#xff08;二&#xff09; 什么是网页2.1 网站是什么&#xff1f;2.2 什么是网站2.3 网站服务器2.4 总结 &#xff08;三&#xff09;HTML基础3.1 什么是HTML3.2 HTML标签3.3 实例3.4 …