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协议的配置参数是确保网络设备能够正确接入互联网并与其他设备进行通信的关键设置。这些参数主要包括以下几个方面: 1. IP地址 定义:IP地址是网络中设备的唯一标识符,用于标识和定位设备。它由32位二进制数组成,通常采用点…...
我有点担心开始AI中台了
有个特点历史教训是很难吸取的 从大数据开始就是一窝蜂的去搞,不管有没有什么数据量。反正要来个Hadoop。其实有些企业数据一块硬盘都放得下。 微服务来了,也不管自己的系统是不是适合微服务。我个人经验得出,to B和to G的业务场景…...
《用Python+PyGame开发双人生存游戏!源码解析+完整开发思路分享》
导语 "你是否想过用Python开发一款可玩性高的双人合作游戏?本文将分享如何从零开始实现一款类《吸血鬼幸存者》的生存射击游戏!包含完整源码解析、角色系统设计、敌人AI逻辑等核心技术点,文末提供完整代码包下载!" 哈…...
优选算法系列(1. 双指针_上)
目录 双指针 一:移动零(easy) 题目链接:移动零 解法: 代码: 二:复写零(easy) 题目链接:复写零 编辑 解法: 代码: 三:快乐…...
永洪科技深度分析实战,零售企业的销量预测
随着人工智能技术的不断发展,智能预测已经成为各个领域的重要应用之一。现在,智能预测技术已经广泛应用于金融、零售、医疗、能源等领域,为企业和个人提供决策支持。 智能预测技术通过分析大量的数据,利用机器学习和深度学习算法…...
c语言笔记 函数参数的等价(上)
这三种写法在 C 语言中是等价的,因为它们都用于声明一个指向二维数组的指针,或者用于声明一个二维数组作为函数参数。它们的等价性源于 C 语言中数组和指针之间的密切关系。让我们逐一分析这三种写法: 在C语言中,当数组作为函数参…...
hive面试题--left join的坑
student 表: 课程表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’ 先过滤右表数据,然后与左表关联 select * from student s le…...
CEH与OSCP:网络安全认证对比分析
在网络安全领域,渗透测试被视为至关重要的一环,帮助企业检测和修复系统漏洞。为提升行业标准,许多认证应运而生,其中CEH和OSCP作为行业认可度较高的认证,广泛被网络安全从业者选择。尽管这两者都涉及渗透测试领域&…...
HTML 属性详解:为网页元素赋予更多功能
在构建网页的过程中,HTML 是基础的标记语言,而 HTML 属性则是为 HTML 元素提供附加信息的重要组成部分。 一、属性的基本概念与使用 属性通常出现在 HTML 标签的开始标签内,以 “name"value"” 的形式存在。这里的 “name” 是属…...
Ceph(2):Ceph简介
1 Ceph简介 Ceph使用C语言开发,遵循LGPL协议开源。Sage Weil(Ceph论文发表者)于2011年创立了以Inktank公司主导Ceph的开发和社区维护。2014年Redhat收购inktank公司,并发布Inktank Ceph企业版(ICE)软件,业务场景聚焦云…...
国产编辑器EverEdit - 设置文件类型关联为EverEdit
1 设置-文件关联 1.1 应用场景 文件关联是指在文件管理器中双击某类型的文件,操作系统自动调用可以打开该文件的应用程序,比如:用户双击XXXX.txt文件,系统默认会使用记事本打开该文件。 由于各行各业都会定义特有的文件类型&…...
2025网络安全工程师:软考新挑战与职业发展探析
网络安全工程师的崛起 随着信息技术的迅猛发展,网络安全问题日益凸显,网络安全工程师这一职业逐渐受到社会各界的广泛关注。特别是在2025年,随着各项网络安全法规的完善和实施,网络安全工程师的角色愈发重要。他们不仅是企业信息…...
设计模式之建造者模式:原理、实现与应用
引言 建造者模式(Builder Pattern)是一种创建型设计模式,它通过将复杂对象的构建过程分解为多个简单的步骤,使得对象的创建更加灵活和可维护。建造者模式特别适用于构建具有多个组成部分的复杂对象。本文将深入探讨建造者模式的原…...
【Leetcode 每日一题 - 补卡】2070. 每一个查询的最大美丽值
问题背景 给你一个二维整数数组 i t e m s items items,其中 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:组队(填空5分_手算) 2B:年号字符(填空5分_进制) 3C:数列求值(填空10分_枚举) 4D:数的分解(填空10分) 5E:迷宫…...
前端安全面试题汇总及参考答案
目录 简述 XSS 攻击的原理及三种常见类型(存储型、反射型、DOM 型) 如何在前端防御 XSS 攻击?列举编码、过滤、CSP 策略的具体实现方式 富文本编辑器场景下如何安全处理用户输入的 HTML 内容? 如何通过 HttpOnly 属性增强 Cookie 安全性?它与 XSS 防御的关系是什么? …...
修复ubuntu下找不到音频设备的问题
出现问题的状态: ALSA 已正确识别到 ZOOM H2n 设备(card 1)sounddevice 库(依赖 PortAudio)未能正确枚举设备 修复方法: 1. 强制 sounddevice 使用 ALSA 后端 默认情况下,sounddevice 可能尝…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么?1.1.2 感知机的工作原理 1.2 感知机的简单应用:基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
