vue脚手架和vite创建的项目的环境配置

开发环境文件 .env.development

NODE_ENV="development"
# // 开发接口域名   本地测试就用这个
# vue脚手架创建的
VUE_APP_MODE="开发环境"
VUE_APP_API_URL= 'http://19527'
# vite创建的
# VITE_MODE="开发环境"
# VITE_BASE_URL= 'http://1920:9527'

生产环境文件 .env.production

NODE_ENV="production"
# // 生产环境域名,放线上就用这个
# vue脚手架创建的
VUE_APP_MODE="生产环境"
VUE_APP_API_URL= 'https://jk:17776'
# vite创建的
# VITE_MODE="生产环境"
# VITE_BASE_URL= 'https:/rk:17776'

测试是否生效

//vue脚手架创建的项目console.log('vue脚手架创建的项目开发的环境是什么',process.env)console.log('vue脚手架创建的项目开发的环境是',process.env.VUE_APP_API_URL)
//vite创建的项目console.log('vite创建的项目开发的环境是什么',import.meta.env)console.log('vite创建的项目开发的环境是',import.meta.env.VITE_MODE)

在这里插入图片描述

注意:vue.config.js或者vite.config.js里面的配置需要自行百度一下了,因为我这边后端设置了运行跨域

项目打包

在 package.js文件里修改打包命令
开发环境打包命令: npm run build:deve
生产环境打包命令: npm run build:prod

{"name": "use","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build:deve": "vite build --mode development", //开发环境打包"build:prod": "vite build --mode production",   //生产环境打包"preview": "vite preview"},"dependencies": {"@element-plus/icons-vue": "^2.1.0","animate.css": "^4.1.1","axios": "^1.4.0","echarts": "^5.5.0","element-plus": "^2.3.6","qs": "^6.11.2","sortablejs": "^1.15.2","vue": "^3.2.47","vue-router": "^4.2.2","vuex": "^4.1.0","vxe-table": "^4.5.22","xlsx": "^0.18.5"},"devDependencies": {"@vitejs/plugin-vue": "^4.1.0","less": "^4.0.0","less-loader": "^8.0.0","unplugin-auto-import": "^0.16.4","unplugin-vue-components": "^0.25.1","vite": "^4.3.9"}
}

在这里插入图片描述

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

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

相关文章

【极速前进】20240423-20240428:Phi-3、fDPO、TextSquare多模态合成数据、遵循准则而不是偏好标签、混合LoRA专家

一、Phi-3技术报告 论文地址:https://arxiv.org/pdf/2404.14219 ​ 发布了phi-3-mini,一个在3.3T token上训练的3.8B模型。在学术基准和内部测试中的效果都优于Mixtral 8*7B和GPT-3.5。此外,还发布了7B和14B模型phi-3-small和phi-3-medium。…

Puppeteer的基本使用及多目标同时访问

文章目录 一、安装 puppeteer 并更改默认缓存路径1、更改 Puppeteer 用于安装浏览器的默认缓存目录2、安装 puppeteer3、项目结构目录 二、基本使用1、启动浏览器并访问目标网站2、生成截图3、生成 PDF 文件4、获取目标网站 html 结构并解析5、拦截请求6、执行 JavaScript7、同…

网络工程师必备知识点

网络工程的基础知识 随着信息化建设不断深入,网络工程项目的实施也越发重要。网络工程涵盖多个方面,例如局域网、广域网、互联网、安全系统等。网络工程项目的实施是建立在信息化技术的基础上的企业信息化建设过程。在网络工程项目实施的过程中&#xf…

OFD(Open Fixed-layout Document)

OFD(Open Fixed-layout Document) ,是由工业和信息化部软件司牵头中国电子技术标准化研究院成立的版式编写组制定的版式文档国家标准,属于中国的一种自主格式,要打破政府部门和党委机关电子公文格式不统一,以方便地进行电子文档的…

资源管理器CPU占用太高

最近资源管理器经常飙到80%-100%,所以电脑很卡。比如下面的新打开一个文件目录就这样 工具 shexview下载地址 排除 排序 先点Microsoft排序,上面粉色的就是所谓的外部插件 全部禁用 粉色全选->右键->Disable Selected Items (看其他…

天锐绿盾 | 办公加密系统,源代码防泄密、源代码透明加密、防止开发部门人员泄露源码

天锐绿盾作为一款专注于数据安全与防泄密的专业解决方案,它确实提供了针对源代码防泄密的功能,帮助企业保护其核心的知识产权。 PC地址: https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 以下是天锐绿盾可能采…

java—异常

异常 什么是异常 异常的体系 编译时异常处理方式 1、选择报错的整个代码块,快捷键crtlaltt键,选择try/catch将代码围起来。 2、编译异常处理方式2 在main方法上抛出异常 自定义异常 例子: 自定义运行时异常 自定义编译时异常 异常…

Misc 流量分析

流量分析简介 网络流量分析是指捕捉网络中流动的数据包,并通过查看包内部数据以及进行相关的协议、流量分析、统计等来发现网络运行过程中出现的问题。 在CTF比赛中,以及各种技能大赛对于流量包的分析取证是一种十分重要的题型。通常这类题目都是会提供…

容器Docker:轻量级虚拟化技术解析

引言 随着云计算和虚拟化技术的飞速发展,容器技术以其轻量级、高效、可移植的特性,逐渐成为了软件开发和部署的新宠。在众多容器技术中,Docker以其简单易用、功能强大的特点,赢得了广泛的关注和应用。本文将全面介绍Docker的基本概…

软件系统测试方案书(测试计划-Word原件)

2 引言 2.1 编写目的 2.3 测试人员 2.4 项目背景 2.5 测试目标 2.6 简写和缩略词 2.7 参考资料 2.8 测试提交文档 2.9 测试进度 3 测试环境 3.1 软硬件环境 4 测试工具 5 测试策略 5.1 测试阶段划分及内容 5.1.1 集成测试 5.1.2 系统测试 5.1.2.1 功能测试 5.…

第六代移动通信介绍、无线网络类型、白皮书

关于6G 即第六代移动通信的介绍, 图解通信原理与案例分析-30:6G-天地互联、陆海空一体、全空间覆盖的超宽带移动通信系统_6g原理-CSDN博客文章浏览阅读1.7w次,点赞34次,收藏165次。6G 即第六代移动通信,6G 将在5G 的基…

Xshell生成ssh密钥及使用

目录 1. 概述2. 环境3. 步骤3.1 生成密钥3.2 部署密钥3.3 使用密钥 1. 概述 使用Xshell软件生成ssh秘钥,正常连接服务器。 2. 环境 Xshell 6 3. 步骤 3.1 生成密钥 1. 打开Xshell --> 工具 --> 新建用户密钥生成向导 2. 选择密钥类型,建议…