当前位置：首页 > news >正文

vue3配置测试环境、开发环境、生产环境

news 来源：原创 2025/5/14 20:24:13

第一步：在src同级新建 .env.production 、.env.test 、.env.development文件
第二步：在文件中配置开发环境、生产环境、测试环境

		// 开发环境 .env.developmentNODE_ENV = 'development'VUE_APP_MODE = 'development' outputDir = dist_dev // 打出包的名称VUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/// 生产环境 .env.productionNODE_ENV = 'production'VUE_APP_MODE = 'production'outputDir = dist_proVUE_APP_BASE_URL = http://xxxxxxxxx:xxxx/// 测试环境 .env.testNODE_ENV = 'alpha' // 此处不能为test，否则会报错VUE_APP_MODE = 'alpha'// 此处不能为test，否则会报错outputDir = dist_testVUE_APP_BASE_URL = http://xxxxxxxxxxxx:xxxx/

第三步：在axios.js中配置基础

import axios from "axios";
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '../router/index';
//axios请求配置
const config = {// 访问后端baseURL: process.env.VUE_APP_BASE_URL,//超时时间timeout: 1000000
}
//class:定义一个类
class Server {//构造函数里面初始化constructor(config) {this.instance = axios.create(config)//定义拦截器:请求发送之前和请求返回之后处理this.interceptors()}//拦截器interceptors() {//axios发送请求之前的处理this.instance.interceptors.request.use((config) => {//token携带let token = localStorage.getItem('token');if (token != null) {config.headers.token = token}let tokenUser = localStorage.getItem('tokenUser');if (tokenUser != null) {config.headers.tokenUser = tokenUser}return config;}, (error) => {error.data = {}error.data.msg = '服务器异常，请联系管理员!'return error;})//axios请求返回之后的处理//请求返回之后的处理this.instance.interceptors.response.use((res) => {if (res.data.code == 0 && res.data.msg?.includes('请先注册')) {return res.data;}if (res.data.code == 0) {if (res.data.msg != 'wxnull') {ElMessage({ type: 'error', message: res.data.msg })}return res.data} else {return res.data}}, (error) => {error.data = {};if (error && error.response) {switch (error.response.status) {case 400:error.data.msg = '错误请求';return ElMessage({ type: 'error', message: error.data.msg })case 401:error.data.msg = '未授权，请重新登录';return ElMessage({ type: 'error', message: error.data.msg })case 403:error.data.msg = '拒绝访问';return ElMessageBox.confirm('很抱歉，登录已过期，请重新登录', '登录已过期', {confirmButtonText: '重新登录',type: 'error',showCancelButton: false}).then(() => {router.push('/login');localStorage.removeItem('token');})case 404:error.data.msg = '请求错误,未找到该资源';return ElMessage({ type: 'error', message: error.data.msg })case 405:error.data.msg = '请求方法未允许';return ElMessage({ type: 'error', message: error.data.msg })case 408:error.data.msg = '请求超时';return ElMessage({ type: 'error', message: error.data.msg })case 500:error.data.msg = '服务器端出错';return ElMessage({ type: 'error', message: error.data.msg })case 501:error.data.msg = '网络未实现';return ElMessage({ type: 'error', message: error.data.msg })case 502:error.data.msg = '网络错误';return ElMessage({ type: 'error', message: error.data.msg })case 503:error.data.msg = '服务不可用';return ElMessage({ type: 'error', message: error.data.msg })case 504:error.data.msg = '网络超时';return ElMessage({ type: 'error', message: error.data.msg })case 505:error.data.msg = 'http版本不支持该请求';return ElMessage({ type: 'error', message: error.data.msg })default:error.data.msg = `连接错误${error.response.status}`;return ElMessage({ type: 'error', message: error.data.msg })}} else {error.data.msg = "连接到服务器失败";// router.push('/login');return ElMessage({ type: 'error', message: error.data.msg })}return Promise.reject(error)})}/* GET 方法 */get(url, params) {return this.instance.get(url, { params })}/* POST 方法 */post(url, data) {return this.instance.post(url, data)}/* PUT 方法 */put(url, data) {return this.instance.put(url, data)}/* DELETE 方法 */delete(url) {return this.instance.delete(url)}//图片上传upload(url, params) {return this.instance.post(url, params, {headers: {'Content-Type': 'multipart/form-data'}})}upimg(url, params) {return this.instance.get(url, params, {headers: {'Content-Type': 'application/octet-stream'}})}
}
export default new Server(config)

第四步：在package.json中配置基础

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","serve:development": "vue-cli-service serve --mode development","build:development": "vue-cli-service build --mode development","serve:production": "vue-cli-service serve --mode production","build:production": "vue-cli-service build --mode production"}
// 使用yarn/npm run serve:development/production 运行
// 使用yarn/npm run build:development/production 打包

第五步：在babel.config.js中配置基础

 compact: false, // 加上此项配置env: {development: {plugins: ['dynamic-import-node']}}

vue3配置测试环境、开发环境、生产环境

第一步：在src同级新建 .env.production 、.env.test 、.env.development文件第二步：在文件中配置开发环境、生产环境、测试环境 // 开发环境 .env.developmentNODE_ENV developmentVUE_APP_MODE development outputDir dist_dev // 打出包的名称VUE_…...

编程日记 2025/5/14 20:24:13

农历节日倒计时：基于Python的公历与农历日期转换及节日查询小程序（升级版）

农历节日倒计时：基于Python的公历与农历日期转换及节日查询小程序升级版调整的功能上一个小程序只是能计算当年的农历节日的间隔时间，那么这次修改一下，任意年份的农历节日都可以，并且能输出农历节日对应的阳历日期&#xff0…...

编程日记 2025/5/10 12:20:31

linux Python环境部署

登录Python官网去下载对应的版本：Python下载地址在data目录下创建python文件夹 mkdir python上传下载的安装包 Python-3.8.18.tgz解压 tar -xf Python-3.8.18.tgz进入解压后的目录 cd Python-3.8.18/编译安装 ./configure --prefix/data/python38 make &&…...

编程日记 2025/5/14 19:42:32

Python基础语法知识——数据类型的查询、数据类型转化

今天第一次学习python，之前学习过C，感觉学习起来还可以，就是刚用的时候有点手残，想的是python代码，结果写出来就是C,本人决定每天抽出时间写点。同时继续更新NX二次开发专栏学习，话不多说，晚上的…...

编程日记 2025/5/14 19:56:15

命令行之巅：Linux Shell编程的至高艺术（中）

文章一览前言一、输入/输出及重定向命令1.1 输入/输出命令1.1.1 read命令1.1.2 echo命令 1.2 输入/输出重定向1.3 重定向深入讲解1.4 Here Document1.4.1 /dev/null 文件二、shell特殊字符和命令语法2.1 引号2.1.1 双引号2.1.2 单引号2.1.3 倒引号 2.2 注释、管道线和后台命令…...

编程日记 2025/5/14 19:59:25

利用Gurobi追溯模型不可行原因的四种方案及详细案例

文章目录 1. 引言2. 追溯不可行集的四种方法2.1 通过约束增减进行判断2.2 通过computeIIS函数获得冲突集2.3 利用 feasRelaxS() 或 feasRelax() 函数辅助排查2.4 利用 IIS Force 属性1. 引言模型不可行是一个让工程师头疼的问题，对于复杂模型而言，导致模型不可行的原因可能…...

编程日记 2025/5/14 18:46:49

「matplotlib」绘制图线和数据点的样式风格和颜色表大全

绘制图线和数据点的样式风格和颜色表大全显示图例 legend() 属性 linestyle 属性 marker 属性color 1、legend() 显示坐标轴中图线的对应标注的显示位置plt.legend(loc) locloc codebest （default）0upper right1upper left2lower left3lower rig…...

编程日记 2025/5/10 7:31:24

【基础还得练】 KKT 条件

优秀教程-真正理解拉格朗日乘子法和 KKT 条件： link优秀教程-最优化(6)：一般约束优化问题的最优性理论： link KKT条件（Karush-Kuhn-Tucker条件）是非线性规划中的一组必要条件，在某些情况下也是最优解的充分…...

编程日记 2025/5/14 19:30:53

Node.JS 版本管理工具 Fnm 安装及配置（Windows）

安装流程可参考：fnm 安装及配置(Windows)_fnm安装-CSDN博客然后就是在git bash如何生效在 Git Bash 中使用 fnm 需要确保你正确设置了环境变量。你可以按照以下步骤进行配置： 1. **打开 Git Bash**： 启动 Git Bash。 2. **编辑 .bas…...

编程日记 2025/5/14 19:50:33

STM32-笔记11-手写带操作系统的延时函数

1、为什么带操作系统的延时函数，和笔记10上的延时函数不能使用同一种？ 因为笔记10的延时函数在每次调用的时候，会一直开关定时器，而在FreeRTOS操作系统中，SysTick定时器当作时基使用。时基是一个时间显示的基本单位。…...

编程日记 2025/5/14 10:43:59

CCNP_SEC_ASA 第六天作业

实验需求： 为保障内部用户能够访问Internet，请把10.1.1.0/24网络动态转换到外部地址池202.100.1.100-202.100.1.200，如果地址池耗尽后，PAT到Outside接口提示：需要看到如下输出信息 Inside#telnet 202.100.1.1 Trying …...

编程日记 2025/5/14 19:15:03

Python小括号( )、中括号[ ]和大括号{}代表什么

python语言最常见的括号有三种，分别是：小括号( )、中括号[ ]和大括号也叫做花括号{ }，分别用来代表不同的python基本内置数据类型。小括号（）：struct结构体，但不能改值 python中的小括号( )&am…...

编程日记 2025/5/14 18:46:49

electron node-api addon开发

解决方案入口拷贝日志以及json等第三方源码增加包含目录编写接口默认模板已经有一个回调函数了照葫芦画瓢就行其中几个重要的点要注意 1.参数传入比如如下的例子： 头文件定义： public:下增加 Napi::Value StartAnswer (const Napi::Callb…...

编程日记 2025/5/14 19:53:56

vue之axios基本使用

文章目录 1. axios 网络请求库2. axiosvue 1. axios 网络请求库 <body> <input type"button" value"get请求" class"get"> <input type"button" value"post请求" class"post"> <!-- 官网提供…...

编程日记 2025/5/14 3:35:50

uniapp中wx.getFuzzyLocation报错如何解决

一、用wx.getLocation接口审核不通过用uniapp开发小程序时难免需要获取当前地理位置。代码如下： uni.getLocation({type: wgs84,success: function (res) {console.log(当前位置的经度： res.longitude);console.log(当前位置的纬度： r…...

编程日记 2025/5/14 18:44:32

Peter Lax线性代数教材：Linear Algebra and Its Applications 2nd Ed

这本线性代数教材，印象很深刻，记得是高中时期自学线性代数的时候看过。这本书跟Gilbert Strang的教材MIT线性代数教材：Linear Algebra and Its Applications相比，内容没这么紧凑，而且表述也更加代数风格，很…...

编程日记 2025/5/14 18:09:01

vue3封装而成的APP ，在版本更新后，页面显示空白

一、问题展示更新之后页面空白，打不开 ，主要是由于缓存造成的二、解决办法 1、随机数代码实现使用随机数来动态的生成静态资源目录名可以避免浏览器缓存，但同时每次也会导致浏览器每次都下载最新的资源。如果静态资源过大，可…...

编程日记 2025/5/14 18:11:41

java系列: javaSE, javaEE，jdk8，jdk17，jdk21 springframework(4, 5, 6) springboot(2, 3) mybatis mybatisplus hibernate springjpa，springjdbc springmvc, springwebflux，structs springsecurity dubbo zookeeper s…...

编程日记 2025/5/14 18:11:41

初始c语言第一个c语言项目

第一个c语言项目 //c语言中一定要有main函数 //主函数//printf是一个库函数 //专门用来打印数据//std 标准 //i-input //o-output // #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h>//c语言规定main函数是程序的入口 //标准的主函数的写法 int main() {printf(&qu…...

编程日记 2025/5/14 5:42:40

CSS实现无限滚动的列表

CSS本身不能实现无限滚动的列表，无限滚动通常需要结合HTML、CSS和JavaScript来完成。以下是一个简单的实现无限滚动的列表的示例，它使用了JavaScript来动态加载和展示内容。 <!DOCTYPE html> <html lang"en"> <head> <me…...

编程日记 2025/5/14 2:30:44

【ES6复习笔记】Spread 扩展运算符（8）

在现代前端开发中，JavaScript 的扩展运算符（Spread Operator）是一个非常有用的特性，它允许你将数组或对象展开，以便在函数调用、数组拼接、对象复制等场景中更方便地处理数据。扩展运算符（spread&#xff0…...

编程日记 2025/5/14 18:20:20

【Rust自学】7.3. use关键字 Pt.1：use的使用与as关键字

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 7.3.1. use的作用 use的作用是将路径导入到当前作用域内。而引入的内容仍然是遵守私有性原则，也就是只有公共的部分引入进来才…...

编程日记 2025/5/14 18:10:28

Vscode + gdbserver远程调试开发板指南:

本章目录步骤环境准备网络配置vscode配置步骤 (全图示例)开发板配置开始调试注意: 每次断开之后，开发板都需要重新启动gdbserver才可调试。参考链接: 步骤环境准备将交叉编译链路径加入$PATH变量：确保系统能够找到所需的工具。 export PATH$PATH:/p…...

编程日记 2025/5/14 2:43:05

python爬虫----爬取视频实战

python爬虫-爬取视频本次爬取，还是运用的是requests方法首先进入此网站中，选取你想要爬取的视频，进入视频页面，按F12，将网络中的名称栏向上拉找到第一个并点击，可以在标头中，找到后续我们想要…...

编程日记 2025/5/11 6:31:38

shardingsphere分库分表项目实践5-自己用java写一个sql解析器+完整项目源码

前1节我们介绍了 shardingsphere 分表分库的sql解析与重写： shardingsphere分库分表项目实践4-sql解析&重写-CSDN博客那么shardingsphere sql 解析底层究竟是怎么实现的呢，其实它直接用了著名的开源软件 antlr . antlr 介绍： ANTLR&a…...

编程日记 2025/5/14 18:25:51

【Rust自学】7.2. 路径（Path）Pt.1：相对路径、绝对路径与pub关键字

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 7.2.1. 路径的简介在Rust里，如果想要找到模块里的某个东西，就必须知道并使用它的路径。Rust中的路径就跟文件系统…...

编程日记 2025/5/14 18:10:28

ubuntu虚拟机中搭建python开发环境

1.Anaconda安装 1）Anaconda下载清华大学开源软件镜像站下载地址：https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 官网：https://www.anaconda.com/distribution/ 2）运行 .sh 文件 bash Anaconda3-5.2.0-Linux-x86_…...

编程日记 2025/5/14 18:09:01

OpenHarmony-5.PM 子系统（2）

电池服务组件OpenHarmony-4.1-Release 1.电池服务组件 Battery Manager 提供了电池信息查询的接口，同时开发者也可以通过公共事件监听电池状态和充放电状态的变化。电池服务组件提供如下功能： 电池信息查询。充放电状态查询。关机充电。电池服务组件架…...

编程日记 2025/5/14 19:12:28

三相电的相电压、线电压、额定值、有效值，变比，零序电压，零序电流，三相三线制的三角形连接，三相四线制的星形连接

在二次设备配置中经常有根电压系统相关的名词，本身不是学电气的，有些名词经常查了忘，后续工作所有遇到跟电气相关的知识总结在此帖，便于后续直接查看，避免每次都要重新查、重新梳理。相电压和线电压的关系是根号3倍&a…...

编程日记 2025/5/7 8:37:15

基于 Slf4j 和 AOP 的自动化方法执行时间日志记录方案

前言其实这个需求很简单，但是这个需求又是项目中必不可少的，尤其对于性能调优这块，但是使用哪种方式更加方便呢，这就是本篇博文需要讨论的重点系统时间可以通过 System.currentTimeMillis() 或 System.nanoTime() 来实现。 …...

编程日记 2025/5/11 10:44:20

C语言-数据结构-树

目录一,树 1,基本术语: 2,树的性质: 3,树的遍历: 4,森林的遍历: 5,树和二叉树的转换: 6,二叉树和森林的转化: 7,树的存储: 1,双亲表示法 2、孩子链存储结构 3、孩子兄弟链存储结构二,二叉树: 1,二叉树的性质: 2,二叉树的遍历: 3,二叉树的存储结构: 顺序存储:…...

编程日记 2025/5/12 21:21:03

探究音频丢字位置和丢字时间对pesq分数的影响

丢字的本质丢字的本质是在一段音频中一小段数据变为0 丢字对主观感受的影响 1. 丢字位置丢字的位置对感知效果有很大影响。如果丢字发生在音频信号的静音部分或低能量部分，感知可能不明显；而如果丢字发生在高能量部分或关键音素上，感知…...

编程日记 2025/5/7 23:33:36

【Linux】flock 文件级别的锁定

flock 是 Linux/Unix 系统中的一个命令，用于实现文件级别的锁定。它允许你在多个进程之间共享对文件的访问，但确保在同一时间只有一个进程可以访问文件，避免竞态条件（race conditions）和数据不一致问题。 flock 的基本…...

编程日记 2025/5/10 13:13:59

每天40分玩转Django：Django部署概述

一、Django部署概述在开发阶段,我们通常使用Django内置的轻量级开发服务器runserver。但在生产环境中,为了应对大量并发请求,需要使用高性能的WSGI服务器,如Gunicorn、uWSGI等。同时还要配置Nginx等Web服务器作为反向代理,实现负载均衡、静态文件处理等。下面是Django部署的整…...

编程日记 2025/5/13 0:45:07

【unity c#】深入理解string，以及不同方式构造类与反射的性能测试（基于BenchmarkDotNet）

出这篇文章的主要一个原因就是ai回答的性能差异和实际测试完全不同，比如说是先获取构造函数再构造比Activator.CreateInstance(type)快，实际却相反对测试结果的评价基于5.0，因为找不到unity6确切使用的net版本，根据c#9推测是net5…...

编程日记 2025/5/10 17:27:53

防抖和节流的方法详解和CSS文本溢出小知识

1.防抖防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时场景：搜索框输入发请求，一些拖拽盒子，或者滚动事件防抖的实现：利用间歇函数 const timer =setTimeout(callback函数，间隔时间) //执行完会返回自身的这个定时器的编号//事件所触发的函…...

编程日记 2025/5/11 10:51:06

深度解析：Maven 和 Gradle 的使用比较及常见仓库推荐

Maven 和 Gradle 是 Java 项目中最常用的构建工具。它们各有优势，适用于不同的场景。本文将对两者进行详细的对比，并推荐一些常用的 Maven 和 Gradle 仓库，帮助开发者高效管理依赖。一、Maven 和 Gradle 的使用比较 1.1 基本介绍 Maven 基…...

编程日记 2025/5/9 8:18:31

CSS---实现盒元素div内input/textarea的focus状态时给父元素加属性！

注意兼容性，低版本浏览器无效要实现当 textarea 文本框获得焦点时，自动给其父元素添加类名或样式，您可以使用 CSS 的 :focus-within 伪类选择器。这个选择器会在元素本身或其任何子元素获得焦点时应用样式。示例代码假设您有以下 HTML 结…...

编程日记 2025/5/10 0:51:53

施耐德变频器ATV320系列技术优势：创新与安全并重

在工业自动化领域，追求高效、安全与智能已成为不可阻挡的趋势。施耐德变频器ATV320系列凭借其强大的设计标准和全球认证，成为能够帮助企业降低安装成本，提高设备性能的创新解决方案。【全球认证，品质保障】ATV320 系列秉持施耐德…...

编程日记 2025/5/14 15:38:03

Dynamo：Amazon 的高可用键值仓储

大家觉得有意义和帮助记得及时关注和点赞!!! Dynamo 是 Amazon 的高可用分布式键值存储（key/value storage）系统。这篇论文发表的时候（2007）它还只是一个内部服务，现在（改名为 DynamoDB）已经发…...

编程日记 2025/5/11 18:28:08

前端开发 -- 自动回复机器人【附完整源码】

一：效果展示本项目实现了一个简单的网页聊天界面，用户可以在输入框中输入消息，并点击发送按钮或按下回车键来发送消息。机器人会根据用户发送的消息内容，通过关键字匹配来生成自动回复。二：源代码分享 <!DOCTYP…...

编程日记 2025/5/10 17:32:37

离散数学群（半群，群，交换群,循环群，对称群，置换群,置换,交代群,轮换）详细,复习笔记

半群: 设G是一个非空集合，若为G上的二元代数运算，且满足结合律，则称该代数系统(G,)为半群性质:非空,封闭,结合律独异点: 含有单位元的半裙练习题： 例:设S是一个非空集合，p(S)是S的幂集，∩和U是p(S…...

编程日记 2025/5/13 6:08:24

Android Java 版本的 MSAA OpenGL ES 多重采样

最近多次被小伙伴问到 OpenGL 多重采样，其实前面文章里多次讲过了，就是构建2个缓冲区，多重采样缓冲区和目标解析缓冲区。代码流程 // Framebuffer IDs private int msaaFBO; private int msaaColorBuffer; private int msaaDepthBuffer;pr…...

编程日记 2025/5/14 17:57:42

学习笔记之初识HALCON

目录一、概要二、数据结构 1、图像Image 2、Region区域 3、XLD 三、图像预处理 1、图像的变换与校正 2、图像增强四、图像的形态学处理 1、边界提取 2、孔洞填充 3、骨架五、图像金字塔六、区域分割 1、区域生长 2、区域分裂与合并七、边缘检测 1、Pre…...

编程日记 2025/5/6 21:10:31

嵌入式硬件杂谈（七）IGBT MOS管三极管应用场景与区别

引言：在现代嵌入式硬件设计中，开关元件作为电路中的重要组成部分，起着至关重要的作用。三种主要的开关元件——IGBT（绝缘栅双极型晶体管）、MOSFET（金属氧化物半导体场效应晶体管）和三极管&#…...

编程日记 2025/5/11 11:14:00

【Rust自学】7.1. Package、Crate和定义Module

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 7.1.1. Rust的代码组织代码组织主要包括： 那些细节可以对外暴露，而哪些细节是私有的在作用域内哪些名称有效… …...

编程日记 2025/5/11 21:47:44

【已解决】pyinstaller打包ico图片报错：OSError: [WinError 225] 无法成功完成操作，因为文件包含病毒或潜在的垃圾软件。

起因： pyinstaller加上 --icon 参数打包时报错。命令如下： 解决： 关闭 Windows 的病毒防护即可，步骤如下。点屏幕右下角通知栏，进入“病毒和威胁防护”： 打开： 关闭实时保护&#xff08…...

编程日记 2025/5/13 7:11:22

广东粤万润与时序数据库TDengine携手打造智慧酒店新未来：数据驱动智能化转型

在智能化转型浪潮席卷全球的当下，智慧酒店行业已然成为推进智能生活应用的先锋领域。从智能照明到环境监测，从安防系统到沉浸式影音娱乐，智慧酒店通过技术赋能为用户提供了更加舒适、高效且个性化的服务体验。然而，随着设备的增多…...

编程日记 2025/5/10 1:20:00

基于云计算的分布式文件存储系统设计与实现

基于云计算的分布式文件存储系统设计与实现第一章绪论 1.1 研究背景及意义随着互联网技术的飞速发展，云计算作为一种新兴的计算模式，以其弹性伸缩、按需分配和成本效益高等特点，逐渐成为信息技术领域的研究热点。它为大数据处理、高性能…...

编程日记 2025/5/14 9:00:57

基于顺序表实现队列循环队列的处理

文章目录 1.假溢出的现象2.循环队列3.顺序表实现队列架构4.顺序表模拟实现队列5.设计循环队列（校招难度） 1.假溢出的现象下面的这个就是我们的假溢出的这个现象的基本的来源： 我们的这个队列里面是有9个位置的，我们知道这个队列…...

编程日记 2025/5/12 17:22:58

相关文章：