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

Nuxt3 ssr build/dev时区分不同的环境

package.json

  "scripts": {"build": "nuxt build --dotenv .env.prod","build:dev": "nuxt build --dotenv .env.dev","postbuild": "mv -f .output ./dist/.output", //支持自定义文件名"dev": "nuxt dev --dotenv .env.dev","dev:prod": "nuxt dev --dotenv .env.prod",}

.env.dev

VITE_BASE_PC_URL=http://pc.dev.com/api
VITE_BASE_MOBILE_URL=http://m.dev.com/api
VITE_API_KEY=675f3e7464bdfxxx
VITE_API_IV=2fd454e95cde8xxx

.env.prod

VITE_BASE_PC_URL=http://pc.prod.com/api
VITE_BASE_MOBILE_URL=http://m.prod.com/api
VITE_API_KEY=675f3e7464bdfxxx
VITE_API_IV=2fd454e95cde8xxx

nuxt.config.ts

export default defineNuxtConfig({runtimeConfig: {// 私有环境变量,仅服务端可访问apiKey: process.env.VITE_API_KEY,apiIV: process.env.VITE_API_IV,pcURL: process.env.VITE_BASE_PC_URL,mobileURL: process.env.VITE_BASE_MOBILE_URL,}
})

plugins/axiosPlugin.ts(服务端/客户端使用runtimeConfig.pcURL)

import axios from 'axios';
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig, AxiosRequestHeaders } from 'axios';
import CryptoJS from 'crypto-js';import { defineNuxtPlugin } from '#app';// 加密函数
function encrypt(plainText: string, key: string, iv: string): string {const keyHex = CryptoJS.enc.Utf8.parse(key);const ivHex = CryptoJS.enc.Utf8.parse(iv);const encrypted = CryptoJS.AES.encrypt(plainText, keyHex, {iv: ivHex,mode: CryptoJS.mode.CBC,padding: CryptoJS.pad.Pkcs7});return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
}export default defineNuxtPlugin(() => {const runtimeConfig = useRuntimeConfig();const deviceType = useDeviceType(); const baseURL = deviceType?.type.value === 'pc' ? (runtimeConfig?.pcURL || process.env.VITE_BASE_PC_URL) : (runtimeConfig?.mobileURL || process.env.VITE_BASE_MOBILE_URL);const axiosInstance: AxiosInstance = axios.create({baseURL: baseURL,timeout: 30000, // 请求超时时间});let customHeadersConfig: Record<string, string> = {};// 请求拦截器axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {if (!config.headers) {config.headers = {} as AxiosRequestHeaders;}config.headers['Content-Type'] = 'application/json;charset=UTF-8';const plainText = String(new Date().getTime());const apiKey = (runtimeConfig.apiKey || process.env.VITE_API_KEY);const apiIV = (runtimeConfig.apiIV || process.env.VITE_API_IV);// 检查环境变量是否定义if (!apiKey || !apiIV) {throw new Error('API 密钥或 IV 未定义');}const encryptedText = encrypt(plainText, apiKey, apiIV);config.headers['Token'] = encryptedText;for (let key in customHeadersConfig) {// config.headers[key] = customHeadersConfig[key];if (customHeadersConfig[key] === '') {delete config.headers[key];} else {config.headers[key] = customHeadersConfig[key];}}return config;},(error) => {console.error('请求错误:', error.message || '未知错误');return Promise.reject(error);});// 响应拦截器axiosInstance.interceptors.response.use((response: AxiosResponse) => response.data,(error) => {if (error.response) {console.log(`错误信息: ${error.response?.data?.message}`)// switch (error.response.status) {//     case 400://         console.log('未授权,请访问最新');//         break;//     case 401://         console.log('未授权,请登录');//         break;//     case 404://         console.log('请求资源不存在');//         break;//     case 500://         console.log('服务器内部错误');//         break;//     default://         console.log(`未知错误: ${error.response.status}`);//         break;// }} else {console.log(`网络错误或其他错误: ${error}`);}return Promise.reject(error);});// 提取请求类型检查逻辑function handleRequestType(url: string, params: any, type: string, customConfig?: {}) {customHeadersConfig = customConfig || {};if (type.toUpperCase() === 'GET') {return axiosInstance.get(url, { params, ...customConfig });} else if (type.toUpperCase() === 'POST') {return axiosInstance.post(url, params, customConfig);} else {throw new Error('不支持的请求类型');}}return {provide: {customRequest: (url = '', params = {}, type = 'POST', customConfig?: {}) => {return handleRequestType(url, params, type, customConfig);},apiAxios: axiosInstance}}
});

相关文章:

Nuxt3 ssr build/dev时区分不同的环境

package.json "scripts": {"build": "nuxt build --dotenv .env.prod","build:dev": "nuxt build --dotenv .env.dev","postbuild": "mv -f .output ./dist/.output", //支持自定义文件名"dev&quo…...

嵌入式学习第二十四天--网络 服务器

服务器模型 tcp服务器: socket bind listen accept recv/send close 1.支持多客户端访问 //单循环服务器 socket bind listen while(1) { accept while(1) { recv/send } } close 2.支持多客户端同时访问 (并发能力) 并发服务器 socket bind …...

tcp/ip协议配置参数有哪些?tcp/ip协议需要设置的参数有哪些

TCP/IP协议的配置参数是确保网络设备能够正确接入互联网并与其他设备进行通信的关键设置。这些参数主要包括以下几个方面&#xff1a; 1. IP地址 定义&#xff1a;IP地址是网络中设备的唯一标识符&#xff0c;用于标识和定位设备。它由32位二进制数组成&#xff0c;通常采用点…...

我有点担心开始AI中台了

有个特点历史教训是很难吸取的 从大数据开始就是一窝蜂的去搞&#xff0c;不管有没有什么数据量。反正要来个Hadoop。其实有些企业数据一块硬盘都放得下。 微服务来了&#xff0c;也不管自己的系统是不是适合微服务。我个人经验得出&#xff0c;to B和to G的业务场景&#xf…...

《用Python+PyGame开发双人生存游戏!源码解析+完整开发思路分享》

导语​ "你是否想过用Python开发一款可玩性高的双人合作游戏&#xff1f;本文将分享如何从零开始实现一款类《吸血鬼幸存者》的生存射击游戏&#xff01;包含完整源码解析、角色系统设计、敌人AI逻辑等核心技术点&#xff0c;文末提供完整代码包下载&#xff01;" 哈…...

优选算法系列(1. 双指针_上)

目录 双指针 一&#xff1a;移动零&#xff08;easy&#xff09; 题目链接&#xff1a;移动零 解法: 代码&#xff1a; 二&#xff1a;复写零&#xff08;easy&#xff09; 题目链接&#xff1a;复写零 ​编辑 解法&#xff1a; 代码&#xff1a; 三&#xff1a;快乐…...

永洪科技深度分析实战,零售企业的销量预测

随着人工智能技术的不断发展&#xff0c;智能预测已经成为各个领域的重要应用之一。现在&#xff0c;智能预测技术已经广泛应用于金融、零售、医疗、能源等领域&#xff0c;为企业和个人提供决策支持。 智能预测技术通过分析大量的数据&#xff0c;利用机器学习和深度学习算法…...

c语言笔记 函数参数的等价(上)

这三种写法在 C 语言中是等价的&#xff0c;因为它们都用于声明一个指向二维数组的指针&#xff0c;或者用于声明一个二维数组作为函数参数。它们的等价性源于 C 语言中数组和指针之间的密切关系。让我们逐一分析这三种写法&#xff1a; 在C语言中&#xff0c;当数组作为函数参…...

hive面试题--left join的坑

student 表&#xff1a; 课程表course: 1、key为null, 不关联 select * from student s left join course c on s.id c.s_id;2、on中过滤条件 与 where 过滤条件区别 on and c.id<>‘1001’ 先过滤右表数据&#xff0c;然后与左表关联 select * from student s le…...

CEH与OSCP:网络安全认证对比分析

在网络安全领域&#xff0c;渗透测试被视为至关重要的一环&#xff0c;帮助企业检测和修复系统漏洞。为提升行业标准&#xff0c;许多认证应运而生&#xff0c;其中CEH和OSCP作为行业认可度较高的认证&#xff0c;广泛被网络安全从业者选择。尽管这两者都涉及渗透测试领域&…...

HTML 属性详解:为网页元素赋予更多功能

在构建网页的过程中&#xff0c;HTML 是基础的标记语言&#xff0c;而 HTML 属性则是为 HTML 元素提供附加信息的重要组成部分。 一、属性的基本概念与使用 属性通常出现在 HTML 标签的开始标签内&#xff0c;以 “name"value"” 的形式存在。这里的 “name” 是属…...

Ceph(2):Ceph简介

1 Ceph简介 Ceph使用C语言开发&#xff0c;遵循LGPL协议开源。Sage Weil(Ceph论文发表者)于2011年创立了以Inktank公司主导Ceph的开发和社区维护。2014年Redhat收购inktank公司&#xff0c;并发布Inktank Ceph企业版&#xff08;ICE&#xff09;软件&#xff0c;业务场景聚焦云…...

国产编辑器EverEdit - 设置文件类型关联为EverEdit

1 设置-文件关联 1.1 应用场景 文件关联是指在文件管理器中双击某类型的文件&#xff0c;操作系统自动调用可以打开该文件的应用程序&#xff0c;比如&#xff1a;用户双击XXXX.txt文件&#xff0c;系统默认会使用记事本打开该文件。   由于各行各业都会定义特有的文件类型&…...

2025网络安全工程师:软考新挑战与职业发展探析

网络安全工程师的崛起 随着信息技术的迅猛发展&#xff0c;网络安全问题日益凸显&#xff0c;网络安全工程师这一职业逐渐受到社会各界的广泛关注。特别是在2025年&#xff0c;随着各项网络安全法规的完善和实施&#xff0c;网络安全工程师的角色愈发重要。他们不仅是企业信息…...

设计模式之建造者模式:原理、实现与应用

引言 建造者模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;它通过将复杂对象的构建过程分解为多个简单的步骤&#xff0c;使得对象的创建更加灵活和可维护。建造者模式特别适用于构建具有多个组成部分的复杂对象。本文将深入探讨建造者模式的原…...

【Leetcode 每日一题 - 补卡】2070. 每一个查询的最大美丽值

问题背景 给你一个二维整数数组 i t e m s items items&#xff0c;其中 i t e m s [ i ] [ p r i c e i , b e a u t y i ] items[i] [price_i, beauty_i] items[i][pricei​,beautyi​] 分别表示每一个物品的 价格 和 美丽值 。 同时给你一个下标从 0 0 0 开始的整数数…...

雪藏HsFreezer(游戏冻结工具) v2.21

HsFreezer 是一款让你可以随心冻结游戏的软件(游戏暂停软件、系统优化软件、进程管理软件),想玩就玩,想停就停,快捷键随心瞬发,单锁模式极致的丝滑切换,当然,不止适用游戏。更有丰富的特色系统优化功能。 PC主机,win掌机,笔记本--无脑装就对了,超大按键超大列表,触控盲操,非常巴…...

2019年蓝桥杯第十届CC++大学B组真题及代码

目录 1A&#xff1a;组队&#xff08;填空5分_手算&#xff09; 2B&#xff1a;年号字符&#xff08;填空5分_进制&#xff09; 3C&#xff1a;数列求值&#xff08;填空10分_枚举&#xff09; 4D&#xff1a;数的分解&#xff08;填空10分&#xff09; 5E&#xff1a;迷宫…...

前端安全面试题汇总及参考答案

目录 简述 XSS 攻击的原理及三种常见类型(存储型、反射型、DOM 型) 如何在前端防御 XSS 攻击?列举编码、过滤、CSP 策略的具体实现方式 富文本编辑器场景下如何安全处理用户输入的 HTML 内容? 如何通过 HttpOnly 属性增强 Cookie 安全性?它与 XSS 防御的关系是什么? …...

修复ubuntu下找不到音频设备的问题

出现问题的状态&#xff1a; ALSA 已正确识别到 ZOOM H2n 设备&#xff08;card 1&#xff09;sounddevice 库&#xff08;依赖 PortAudio&#xff09;未能正确枚举设备 修复方法&#xff1a; 1. 强制 sounddevice 使用 ALSA 后端 默认情况下&#xff0c;sounddevice 可能尝…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...