vue 部署后修改配置文件(接口IP)

近期,有一个项目,运维在部署的时候,接口ip还没有确定,而且ip后面的路径一直有变动,导致我这里一天打包至少四五次才行,很麻烦,然后看了下有没有打包后修改配置文件修改接口ip的方法,对比了下,使用以下方法

前提:vue2

方案一:

    在public文件夹新建config.js文件

#config.js
window.config= {ServeUrl:"xx",FileUrl:"xx",
}

   main.js 中配置

 axios.defaults.baseURL = window.config.ServeUrl;

因为此方案灵活性不好,没有测试使用 

方案二(我使用的)

  

   下载generate-asset-webpack-plugin插件 

    本地的配置文件模板config.js(根目录创建)

module.exports = {ServeUrl:"xxx",
}

    vue.config.js配置:

const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
const configs = require('./config')  //引用本地的配置文件// 导出配置文件的内容
var createServerConfig = function(compilation) {return JSON.stringify(Object.assign({_hash: compilation.hash,},configs))
}
module.exports = {publicPath: process.env.VUE_APP_publicPath, lintOnSave: false,productionSourceMap: false, //打包不生成map// devServer: {//   open: true,//   proxy: 'http://localhost:8080'// }chainWebpack(config) {config.plugin('html').tap((args) => {args[0].title = process.env.VUE_APP_Titlereturn args})// 打包生成配置文件config.plugin('GenerateAssetPlugin').use('generate-asset-webpack-plugin', [{filename: 'config.json',//生成的文件fn: (compilation, cb) => {cb(null, createServerConfig(compilation))},extraFiles: [],},])}
}

   本地不同环境打包使用的配置环境

        具体设置看vue .env配置环境变量-CSDN博客

   

NODE_ENV='test'
VUE_APP_publicPath='/eseal/policy'VUE_APP_ServeUrl="x"
VUE_APP_FileUrl="x"

package.json配置

     为了本地环境和线上环境做区分,需要修改默认启动配置

"serve": "vue-cli-service serve --mode test",

main.js配置

if(process.env.NODE_ENV !== 'test'){    //前提是本地运行环境是testaxios({method: 'get',url: process.env.VUE_APP_publicPath+'/config.json',  //文件存放地址}).then(res=>{console.log('读取配置',res);axios.defaults.baseURL = res.data.ServeUrl;Vue.prototype.$ServeUr = res.data.ServeUrVue.prototype.$FileUrl = res.data.FileUrl})
}else{
axios.defaults.baseURL= process.env.VUE_APP_ServeUrl
Vue.prototype.$ServeUr = process.env.VUE_APP_ServeUr
Vue.prototype.$FileUrl = process.env.VUE_APP_FileUrl
}

axios.js 接口请求文件配置

    因为使用全局变量的this获取不到数据,引入vue也不行,就多写了一次,根据不同需求,这个也可以不写的

if(process.env.NODE_ENV !== 'test'){axios({method: 'get',url: process.env.VUE_APP_publicPath+'/config.json',}).then(res=>{console.log('读取配置',res);axios.defaults.baseURL = res.data.ServeUrl;})
}else{
axios.defaults.baseURL= process.env.VUE_APP_ServeUrl
}

 修改配置之后,刷新一下页面即可获取最新的数据

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自定义View中的ListView和ScrollView嵌套的问题

当我们在使用到ScrollView和ListView的时候可能会出现显示不全的问题。那我们可以进行以下分析 ScrollView在测量子布局的时候会用UNSPECIFIED。通过源码观察, 在ScrollView的onMeasure方法中 Overrideprotected void onMeasure(int widthMeasureSpec, int heightMe…

AI对话系统app开源

支持对接gpt,阿里云,腾讯云 具体看截图 后端环境:PHP7.4MySQL5.6 软件:uniapp 废话不多说直接上抗揍云链接: https://mny.lanzout.com/iKFRY1o1zusf 部署教程请看源码内的【使用教程】文档 欢迎各位转载该帖/源码

webrtc

stun服务 阿里云服务器安全组添加端口开放 webrtc-streamer视屏流服务器搭建 - 简书

Dockerfile(1) - FROM 指令详解

FROM 指明当前的镜像基于哪个镜像构建dockerfile 必须以 FROM 开头&#xff0c;除了 ARG 命令可以在 FROM 前面 FROM [--platform<platform>] <image> [AS <name>]FROM [--platform<platform>] <image>[:<tag>] [AS <name>]FROM […

naive-ui-admin 表格去掉工具栏toolbar

使用naive-ui-admin的时候&#xff0c;有时候不需要显示工具栏&#xff0c;工具栏太占地方了。 1.在src/components/Table/src/props.ts 里面添加属性 showToolbar 默认显示&#xff0c;在不需要的地方传false。也可以默认不显示 &#xff0c;这个根据需求来。 2.在src/compo…

微服务-微服务链路追踪组件Skywalking实战

自动化监控系统Prometheus&Grafana实战: 4 trem APM-性能监控项目: 4 trem 1. skywalking是什么 1.1 Skywalking主要功能特性 1.2 Skywalking整体架构 1.3 SkyWalking 环境搭建部署 2. SkyWalking快速开始 2.1 SkyWalking Agent追踪微服务 2.1.1 通过jar包方式接…

时序数据库TimescaleDB,实战部署全攻略

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

P沟道与N沟道MOSFET的基本概念

N沟道与P沟道MOSFET基本原理与区别 学习MOSFET时的简单笔记作为个人总结&#xff0c;仅供学习参考&#xff0c;实际电路设计请直接略过&#xff01;&#xff01;&#xff01; 文章目录 N沟道与P沟道MOSFET基本原理与区别前言一、MOSFET &#xff1f;二、N沟道MOS管原理三、P沟…

怎么调用文心一言的api接口生成一个简单的聊天机器人(python代码)

寒假在学习大模型&#xff0c;但也没弄出多少眉目&#xff0c;电脑性能还有点小问题&#xff0c;大模型总跑不起来&#xff0c;只会简单调用一下现有的大模型的接口&#xff0c;例如&#xff1a;文心一言&#xff0c;下面展示一下代码&#xff1a; import tkinter as tk impor…

【小沐学QT】QT学习之信号槽使用

文章目录 1、简介2、代码实现2.1 界面菜单“转到槽”方法2.2 界面信号槽编辑器方法2.3 QT4.0的绑定方法2.4 QT5.0之后的绑定方法2.5 C11的方法2.6 lamda表达式方法2.7 QSignalMapper方法 结语 1、简介 在GUI编程中&#xff0c;当我们更改一个小部件时&#xff0c;我们通常希望…

【vmware安装群晖】

vmware安装群晖 vmware安装群辉&#xff1a; vmware版本&#xff1a;17pro 下载链接&#xff0c; https://customerconnect.vmware.com/cn/downloads/details?downloadGroupWKST-1751-WIN&productId1376&rPId116859 激活码可自行搜索 教程&#xff1a; https://b…

STM32串口通信(发送与接收数据)

文章目录 前言一、介绍部分通信接口术语解释 串口通信简介硬件电路电平标准串口参数串口时序USART简介USART框图USRAT基本结构数据帧起始位检测波特率发生器CH340G 二、实例部分使用串口发送数据接线图代码实现重定向printf需要勾上Use MicroLIB中文不乱码方法 串口的发送与接收…

Go语言必知必会100问题-10 小心类型嵌入导致的问题

小心类型嵌入导致的问题 在定义结构体时&#xff0c;Go语言支持通过类型嵌入的形式定义结构体字段。但是&#xff0c;如果我们没有真正理解类型嵌入的意义&#xff0c;有时可能会导致意想不到的行为。本文将主要分析如何嵌入类型&#xff0c;类型嵌入的作用以及可能出现的问题…

Leetcode1035. 不相交的线 -代码随想录

题目&#xff1a; 代码(首刷看解析 2024年2月29日&#xff09;&#xff1a; class Solution { public:// 动态规划 思路同最长公共子序列int maxUncrossedLines(vector<int>& nums1, vector<int>& nums2) {int m nums1.size();int n nums2.size();vecto…

vue中组合式API和选项式API的区别

组合式api&#xff08;Composition API&#xff09;是vue3对我们开发者来说变化非常大的更新&#xff0c;我们先不关注具体语法&#xff0c;先对它有一个大的感知。 通过vue2, vue3两种形式实现同一个需求&#xff0c;理解vue3的compition api 带来的好处 两个独立的功能&…

MySQL 如何从 Binlog 找出变更记录并回滚

文章目录 前言1. 案例模拟1.1 确认信息1.2 下载 Binlog1.3 准备环境1.4 注册 Binlog1.5 准备结构信息1.6 Python 订阅1.7 输出结果展示 2. 原理解析2.1 程序设计2.2 模块版本 总结 前言 最近有研发同学问我&#xff1a;有一个问题&#xff0c;想查一个 ID 为 xxxx 的 sku 什么…

Android Gradle开发与应用 (二) : Groovy基础语法

1. Groovy是什么 Groovy是基于JVM虚拟机的一种动态语言&#xff0c;语法和Java非常相似&#xff0c;并能够无缝地与Java代码集成和互操作&#xff0c;增加了很多动态类型和灵活的特性。(闭包、DSL) 语法和Java非常相似这个特点&#xff0c;意味着&#xff0c;如果我们完全不懂…

推荐几款优秀免费开源的导航网站

&#x1f9a9;van-nav 项目地址&#xff1a;van-nav项目介绍&#xff1a;一个轻量导航站&#xff0c;汇总你的所有服务。项目亮点&#xff1a;全平台支持&#xff0c;单文件部署&#xff0c;有配套浏览器插件。效果预览 &#x1f9a9;发现导航 项目地址&#xff1a;nav项目…

算法 -【从前序与中序遍历序列构造二叉树】

从前序与中序遍历序列构造二叉树 题目示例1示例2 分析代码 题目 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例1 输入: preorder [3,9,20,1…

RabbitMQ实战学习

RabbitMQ实战学习 文章目录 RabbitMQ实战学习RabbitMQ常用资料1、安装教程2、使用安装包3、常用命令4、验证访问5、代码示例 一、RabbitMQ基本概念1.1. MQ概述1.2 MQ 的优势和劣势1.3 MQ 的优势1. 应用解耦2. 异步提速3. 削峰填谷 1.4 MQ 的劣势1.5 RabbitMQ 基础架构1.6 JMS 二…