Vite多环境配置与打包:

环境变量必须以VITE开头

1.VITE_BASE_API:

  • 在开发环境中设置为 /dev-api,这是一个本地 mock 地址,通常用于模拟后端接口。

2.VITE_ENABLE_ERUDA:

  • 设置为 "true",表示启用调试工具,通常是为了方便开发和调试。

3.VITE_PUBLIC_PATH:

  • 在开发环境中设置的打包路径为 http://192.168.10.7:8001,这可能是一个本地开发服务器的地址。

开发环境:

# baseUrl 
# /dev-api 为本地 mock 地址,不使用 mock 的话此处换为你的开发环境接口地址,例如 http://192.168.233.233
VITE_BASE_API = '/dev-api'# 开发环境启用 cdn eruda 调试工具。若不启用,将 true 修改为 false 或其他任意值即可
VITE_ENABLE_ERUDA = "true"# 线上环境平台打包路径
VITE_PUBLIC_PATH = http://192.168.10.1

线上生产环境:

线上生产环境的链接和打包路径通常是不同的。

  • VITE_BASE_API:这是指向后端 API 的基础 URL,通常用于应用程序与后端服务器通信。在你的例子中,它指向 http://192.168.10.7:8881/,这通常是一个内部或开发环境的地址。
  • VITE_PUBLIC_PATH:这是静态资源的公共路径,用于线上环境中访问静态文件。在你的例子中,它指向 http://8.154.36.180:8903,可能是一个用于托管静态资源的 CDN 或服务器。

Vite多环境配置与打包:

1. 安装依赖

npm install --save-dev cross-env

npm install --save-dev cross-env 命令用于安装 cross-env 这个工具,并将其作为开发依赖添加到你的项目中。下面是更详细的说明:

cross-env 的用途

  • 跨平台环境变量设置:

cross-env 允许你在不同操作系统(如 Windows 和 Unix/Linux)上统一设置环境变量。因为在 Windows 和 Unix 系统中设置环境变量的方式不同,使用 

cross-env 可以避免这些差异。

  • 常用场景:通常在 package.json 的 scripts 部分使用,用于设置环境变量后执行特定的命令。

示例:

在 package.json 中的 scripts 部分,你可能会看到类似的命令:

"scripts": {"start": "cross-env NODE_ENV=development node server.js","build": "cross-env NODE_ENV=production webpack"
}

这意味着无论在 Windows 还是 Unix 系统上,你都可以使用 npm run start 或 npm run build 来启动开发或生产环境,而不必担心操作系统的差异。

如何检查项目中是否配置了 cross-env(忽略):

1.查看 package.json:

  • 打开项目根目录下的 package.json 文件,检查 devDependencies 是否包含 cross-env:

2..使用命令行:

  • 运行以下命令查看所有安装的包,包括开发依赖:
npm ls --dev
  • 在输出中查找 cross-env,如果找到了,说明项目已经配置了这个工具。

2. 配置环境变量

在项目根目录下创建 .env 文件,分别为不同环境创建不同的环境变量配置。例如:

  • .env.development:开发环境
  • .env.production:生产环境

在这些文件中,你可以设置不同的环境变量,例如 API 端点或其他服务的配置。

# .env
VITE_API_URL=https://api.example.com# .env.development
VITE_API_URL=http://localhost:3000# .env.production
VITE_API_URL=https://api.prod.example.com

3. 应用环境变量

在项目中,你可以通过 import.meta.env 访问这些环境变量。

在login登录页的时候,启动的时候可以打印到控制台查看运行的环境

// 在 Vue 组件或任何 JS 文件中console.log(import.meta.env.MODE);

这个文件是自动生成的,后面会详细解释

4. 运行和构建项目

使用不同的环境变量运行和构建项目。在命令行中,你可以通过 --mode 选项指定环境。

# 开发环境
vite --mode development# 生产环境
vite build --mode production

或者,你可以在 package.json 的脚本中定义不同的命令,以便更方便地运行和构建。

// package.json
{"scripts": {"dev": "vite --mode development","build:dev": "vite build --mode development","build:prod": "vite build --mode production"}
}

然后,你可以使用 npm 或 yarn 运行这些脚本(后续给老师,老师来对命令进行区分):

npm run dev
npm run build:dev
npm run build:prod

在 vite.config.ts中

使用了defineConfig 函数来定义构建选项。

export default defineConfig(({ mode }) => ({build: {rollupOptions: {output: {chunkFileNames: "static/js/[name]-[hash].js",entryFileNames: "static/js/[name]-[hash].js",assetFileNames: "static/[ext]/[name]-[hash].[ext]"}}}
}));
  • 默认环境:如果你没有在命令行中通过 --mode 参数显式指定模式,当你运行 vite build 时,默认情况下,Vite 将会使用 production(生产) 模式。
  • 在 production 模式下,Vite 会进行优化,以确保生成的构建文件适合生产环境。

可以通过在命令行中指定 --mode 参数来切换到其他环境,例如开发环境。


文件名:

ImportMetaEnv 和 ImportMeta 这些接口通常是在使用 Vite 和 TypeScript 时自动生成的。它们是 Vite 提供的类型定义,旨在帮助开发者在项目中更好地使用环境变量和模块功能。

具体情况:

  1. 自动生成:当你创建 Vite 项目时,Vite 会自动生成相关的类型定义文件,以便 TypeScript 能够正确识别 import.meta 对象的属性。
  2. 类型安全:这些接口提供了类型安全的方式来访问环境变量和其他模块元数据,减少了运行时错误的可能性。
  3. 更新:如果你更改了 Vite 配置中的环境变量,重新启动开发服务器后,这些类型定义会自动更新,以反映最新的配置。

接口详解:

1.ImportMetaEnv:

  • 描述了环境变量的类型。它可以包含任意数量的键值对,但至少有以下几个属性:
    • SSR: 布尔值,指示是否启用服务端渲染。
    • PROD: 布尔值,指示是否在生产模式。
    • DEV: 布尔值,指示是否在开发模式。
    • MODE: 当前运行模式(如 development 或 production)。
    • BASE_URL: 应用的基础 URL。

2.ImportMeta:

  • 描述了模块的元数据,包括:
    • glob: 动态导入多个模块的函数。
    • env: 当前环境变量的信息,类型为 ImportMetaEnv。
    • hot: 可选属性,用于热模块替换(HMR)。
    • url: 当前模块的完整路径。

模版:

interface ImportMetaEnv {[key: string]: anyBASE_URL: stringMODE: stringDEV: booleanPROD: booleanSSR: boolean
}interface ImportMeta {// 当前模块的 URL,指向模块文件的完整路径url: string;// 可选属性,用于支持热模块替换 (HMR)// 如果启用 HMR,该属性提供一个上下文对象readonly hot?: import('./hot').ViteHotContext;// 当前环境变量的信息// 包含构建时或运行时的环境配置,如 API URL、版本号等readonly env: ImportMetaEnv;// 动态导入多个模块的函数// 与 glob 模式结合使用,允许批量加载模块glob: import('./importGlob').ImportGlobFunction;
}

使用示例

在 Vite 项目中,可以直接使用这些接口来访问环境变量和模块信息。

// 假设在你的 TypeScript 文件中// 访问环境变量const apiUrl = import.meta.env.VITE_BASE_API; // 访问基础 API URLconst isDev = import.meta.env.DEV; // 判断是否在开发模式// 打印环境信息console.log(`API URL: ${apiUrl}`);console.log(`Is Development: ${isDev}`);// 使用 HMR(如果启用)if (import.meta.hot) {import.meta.hot.accept((newModule) => {// 处理热更新console.log('Module updated:', newModule);});
}// 使用动态导入const loadComponent = async () => {const module = await import.meta.glob('./components/*.vue'); // 动态加载所有 Vue 组件console.log(module);
};
loadComponent();

前面提到,默认是生产环境指的是打包的默认模式:

默认模式说明

1.开发模式:

  • 当你运行 vite 命令或 npm run dev 时,Vite 默认使用开发模式。这是因为开发命令通常用于启动开发服务器,帮助开发者实时预览和调试应用。

2.生产模式:

  • 当你运行 vite build 时,Vite 默认会使用生产模式来构建应用。这里的 "默认" 指的是在没有显式指定 --mode 参数的情况下,Vite 会将 NODE_ENV 设置为 production。
总结
  • 开发命令(如 npm run dev)默认使用开发模式。
  • 构建命令(如 vite build)默认使用生产模式。

这两者并不冲突。在开发过程中,你通常使用开发模式,而在构建生产版本时,Vite 则使用生产模式。

所运行的时候默认是开发环境

如果你的 Vite 项目默认使用开发环境,通常是因为以下几个原因:

1.未指定环境模式
  • 默认情况下,当你运行 vite 或 vite build 命令时,如果没有显式指定 --mode 参数,Vite 会将 NODE_ENV 设置为 development。
  • 例如,运行以下命令时:
npm run dev

这将启动开发服务器,默认使用开发模式。

package.json 脚本配置

  • 在 package.json 中,可能会有类似以下的脚本:
"scripts": {"dev": "vite",  // 启动开发服务器"build": "vite build"  // 构建生产版本
}
  • 运行 npm run dev 会启动开发服务器,并使用开发环境。
2.vite.config.js 配置
  • 如果在 vite.config.js 中没有特别配置以指定环境,Vite 将默认为开发模式。
  • 你可以查看 vite.config.js,确认是否有设置 mode 的代码。
3.环境变量文件
  • Vite 支持使用环境变量文件(如 .env, .env.development, .env.production)来设置不同的环境变量。
  • 如果没有 .env.production 文件,或者在构建时没有指定 --mode production,则默认使用开发环境的配置。
4.命令行参数
  • 如果你希望在构建时使用生产环境,可以使用:
npm run build -- --mode production
总结

你的项目默认是开发环境,通常是因为没有显式指定其他环境模式。你可以通过查看 package.json、vite.config.js 和环境变量文件来确认和修改环境配置。

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

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

相关文章

Android Framework AMS(01)AMS启动及相关初始化1-4

该系列文章总纲链接:专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明: 说明:本章节主要涉及systemserver启动AMS及初始化AMS相关操作。同时由于该部分内容分析过多,因此拆成2个章节,本章节是第一章节&…

用户在网页上输入一个网址,它整个页面响应的流程是什么?

目录 一、流程的大致过程 二、流程的详细分析 1. 浏览器先分析超链接中的URL 2. DNS解析 3. 建立TCP连接 建立连接(三次握手) HTTP中的请求报文 4. 浏览器发送HTTP请求 5. 服务器处理请求并发送响应 HTTP的响应报文 6. 浏览器接收响应 7. 渲…

音视频入门基础:FLV专题(12)——FFmpeg源码中,解析DOUBLE类型的ScriptDataValue的实现

一、引言 从《音视频入门基础:FLV专题(9)——Script Tag简介》中可以知道,根据《video_file_format_spec_v10_1.pdf》第80到81页,SCRIPTDATAVALUE类型由一个8位(1字节)的Type和一个ScriptDataV…

OpenJudge | 置换选择排序

总时间限制: 1000ms 内存限制: 65536kB 描述 给定初始整数顺串,以及大小固定并且初始元素已知的二叉最小堆(为完全二叉树或类似完全二叉树,且父元素键值总小于等于任何一个子结点的键值),要求利用堆实现置换选择排序&a…

idea2024设置中文

今天下载idea2024.2版本,发现已经装过中文插件,但是还是不显示中文,找了半天原来还需要设置中文选项 方案一 点击文件 -> 关闭项目 点击自定义 -> 选择语言 方案二 点击文件 -> 设置 外观与行为 -> 系统设置 -> 语言和地区…

[深度学习][python]yolov11+bytetrack+pyqt5实现目标追踪

【算法介绍】 YOLOv11、ByteTrack和PyQt5的组合为实现高效目标追踪提供了一个强大的解决方案。 YOLOv11是YOLO系列的最新版本,它在保持高检测速度的同时,通过改进网络结构、优化损失函数等方式,提高了检测精度,能够同时处理多个…

高空抛物AI检测算法:精准防控,技术革新守护城市安全

近年来,随着城市化进程的加速,高楼大厦如雨后春笋般涌现,但随之而来的高空抛物问题却成为城市管理的一大难题。高空抛物不仅严重威胁行人的安全,还可能引发法律纠纷和社会问题。为了有效预防和减少高空抛物事件的发生,…

微服务获取用户信息和OpenFeign传递用户

问题一: 网关已经完成登录校验并获取登录用户身份信息。但是当网关将请求转发到微服务时,微服务又该如何获取用户身份呢? 由于网关发送请求到微服务依然采用的是Http请求,因此我们可以将用户信息以请求头的方式传递到下游微服务…

毕业设计选题:基于ssm+vue+uniapp的医院管理系统小程序

开发语言:Java框架:ssmuniappJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:M…

SQL Inject-基于报错的信息获取

常用的用来报错的函数 updatexml() : 函数是MYSQL对XML文档数据进行查询和修改的XPATH函数。 extractvalue(): 函数也是MYSQL对XML文档数据进行查询的XPATH函数。 floor(): MYSQL中用来取整的函数。 思路: 在MySQL中使用一些指定的函数来制造报错&am…

如 有 任 何 问 题 ,请 及 时 联 系 我 们 反 馈 !

如有任何问题, 请及时联系我们反馈 !https://support.qq.com/products/671606 如有任何问题, 请及时联系我们反馈 !

中间件介绍

可以把中间件想象成是在应用和系统之间搭建的一座桥梁,或者说是一个“翻译官”和“中转站”。它处在操作系统、网络和数据库之上,应用软件的下层,负责实现应用软件之间的互联互通,使得应用软件能够更方便、高效地进行数据交换和通…

【深度学习】— softmax回归、网络架构、softmax 运算、小批量样本的向量化、交叉熵

【深度学习】— softmax回归、网络架构、softmax 运算、小批量样本的向量化、交叉熵 3.4 Softmax 回归3.4.1 分类问题3.4.2 网络架构 3.4.3 全连接层的参数开销3.4.4 softmax 运算3.4.5 小批量样本的向量化3.4.6 损失函数对数似然softmax 的导数 3.4.7 信息论基础熵信息量重新审…

网站开发基础:HTML、CSS

前端开发主要使用的技术如 HTML、CSS 和 JavaScript 等。 简单制作一个网页 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>柒毓同学网站的首页</title><style>.c1{border: solid 1px g…

C语言—单链表

目录 一、链表的概念及结构 二、单链表实现 &#xff08;2.1&#xff09;基本结构定义 &#xff08;2.2&#xff09;申请节点 &#xff08;2.3&#xff09;打印函数 &#xff08;2.4&#xff09;头部插入删除\尾部插入删除 &#xff08;2.4.1&#xff09;尾部插入 &…

计算机毕业设计 智慧物业服务系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

【算法笔记】双指针算法深度剖析

【算法笔记】双指针算法深度剖析 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;算法笔记 文章目录 【算法笔记】双指针算法深度剖析前言一.移动零1.1题目1.2思路分析1.3代码实现 二.复写零2.1题目2.2思路分析2.3代码实现 三.快乐数3.1题目…

【自然语言处理】(1) --语言转换方法

文章目录 语言转换方法一、统计语言模型1. 词向量转换2. 统计模型问题 二、神经语言模型1. 词向量化2. 维度灾难3. 解决维度灾难4. embedding词嵌入5. Word2Vec技术5.1 连续词袋模型&#xff08;CBOW&#xff09;5.2 跳字模型&#xff08;Skip-gram&#xff09; 总结 语言转换方…

【ssh-xorg】SSH远程配置X11窗口回传

前言 我们通常在进行远程配置板端的时候往往会出现一个问题&#xff0c;在不连接显示屏或者启用VNC服务的前提下(或者使用其他软件提供的功能)&#xff0c;我们无法在远程终端看到板端的新窗口&#xff0c;本文提供一种方式&#xff0c;在进行ssh远程连接时候制定参数-CX&…

【大数据】Doris 数据库与表操作语法实战详解

目录 一、前言 二、数据库基本操作 2.1 修改账户密码 2.2 创建新用户 2.3 创建数据库与账户授权 2.3.1 数据库创建补充说明 2.3.2 数据库账户赋权 三、数据表基本操作 3.1 Doris 数据表介绍与使用 3.1.1 建表结构说明 3.1.2 建表语法与操作 3.1.3 建表示例 - 单分区…