前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue4.x配置env开发环境、测试环境、生产环境

Vue4.x配置env开发环境、测试环境、生产环境

作者头像
明知山
发布于 2020-09-02 08:37:08
发布于 2020-09-02 08:37:08
1.3K00
代码可运行
举报
文章被收录于专栏:前端开发随笔前端开发随笔
运行总次数:0
代码可运行

在项目根目录新建三个env文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.env.development //开发环境
.env.production //生产环境
.env.test //测试环境

.env.development

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_BASE_URL = "http://testapi"

.env.production

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = 'http://api'

.env.test

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_BASE_URL = "http://testapi"
outputDir = test

配置完成重新npm run serve启动 打印process.env看到自己的配置项

vue.config文件 没有就新建一个

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = {
  publicPath: "./",
  lintOnSave: false, //关闭eslint
  outputDir: process.env.outputDir, 
};

更改package.json文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"build": "vue-cli-service build && vue-cli-service build --mode test",
"test": "vue-cli-service build --mode test",

npm run test会生成test文件夹 npm run build 会同时打包两个文件夹disttest dist文件夹放在生产环境 test文件夹放在测试环境

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/07/04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue cli3 build 区分测试环境和生产环境
三、vue.config.js 修改 outputDir:process.env.outputDir,
tianyawhl
2021/04/01
1.2K0
vue cli3 build 区分测试环境和生产环境
webpack从零搭建开发环境
为了方便也可以这么写,使用 npm run 命令这个命令执行的时候默认会把 node_modules 的.bin 文件放到全局上,执行之后销毁npm run buildnpm run dev
小丑同学
2020/09/21
1.3K0
VUE项目使用.env文件配置全局环境变量
注意:属性名必须以VUE_APP_开头,比如VUE_APP_URL VUE_APP_XXX
用户4464623
2020/09/10
3.1K0
uni-app的多环境部署配置
记录下如何对uni-app项目进行多环境打包部署改造 # 环境区分 官方文档说明: 开发环境和生产环境 uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。 在HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境 # 解决方案 使用基于vue-cli命令行方式创建项目 添加必要的环境变量, VUE_APP_ 起始,例如 VUE_APP_BASE_API 即在
薛定喵君
2021/05/18
3.8K0
【前端配置篇】vue项目之.env系列文件配置详解:.env文件配置全局环境变量
vue 会根据启动命令自动加载相对应的环境配置文件。vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”
江一铭
2022/06/17
19.6K0
【前端配置篇】vue项目之.env系列文件配置详解:.env文件配置全局环境变量
基于 Vue-cli 3x的项目部署
项目中涉及使用了 vue-cli 3x脚手架、自动化部署工具jenkins、nginx等。
树酱
2020/07/03
8050
vue3+element-plus+router+vuex+axios从零开始搭建(2)
vue-cli 3.0x与vue-cli 2.0x最主要的区别是项目结构目录精简化,这也带来了许多问题,很多配置需要自己配置,
solate
2021/06/21
1.5K0
实战总结 Vue 学习看这一篇就够了
当前总结是本人在业余学习与实践过程后的总结与归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门,总结是基于 vue2.x,vue-cli3.x ,主要记录些,vue 常用的指令、事件,监听、数据绑定、过滤器、组件、动画、vuex,vue-router 等日常工作中时常用到的东西,也有些常用的插件和开发工具的介绍与使用,以及部分性能优化的建议与实践,如有不对,或不足的地方,也请各位大神,指出来,学习学习。
网罗开发
2021/02/26
1.9K0
Vue CLI中使用webpack的多模式和环境变量
在vue项目中我们根据不同的环境去打不同的包, 如测试环境,开发环境, 正式环境 这个时候我们可以使用webpak中的模式和环境变量来操作
拿我格子衫来
2022/01/24
7020
electron套壳vue2项目
最近lender提了个需求,说最近项目可能要变动一下,把网页端变成桌面端,小手一挥,博主就开始库库的找。奈何网上教程一大堆,但是没找到一个对版的,不是安装过程有错,就是执行命令过程失误。一个教程文章得搜五个报错文章,虽然最终我做出来噜,但是很费劲,所以这篇用来总结一下。
刘小胖
2024/04/10
5092
electron套壳vue2项目
react配置生产环境和测试环境地址
写在前面 之前一直写关于vue的文章,经常看我文章的可能从上篇文章就知道了我已经不写vue了,以后就写react了,会持续更新,今天说一下我搭建框架的时候配置不同环境的步骤,大家可以借鉴以下,也可以自己搞一下! 在项目根目录创建两个环境文件 .env.development .env.production 文件内容 .env.developemnt REACT_APP_BASE_URL = 'https://test.com' REACT_APP_ENV = 'development' .env.pr
何处锦绣不灰堆
2021/05/06
2.8K0
Vue开发项目过程中环境变量的配置(vite、vue3、ts)
项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同,若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生,我们只需做简单的配置,把环境状态切换的工作交给代码。
HelloWorldZ
2024/05/24
6320
Vue开发项目过程中环境变量的配置(vite、vue3、ts)
vue-cli3项目搭建配置以及性能优化
在之前的开发中主要用的是vue-cli2,最近空闲时间比较多,接下来有新项目,本着偷懒的本能,自己打算搭建一个基础包以备后期开发应用,并对其进行性能优化和配置
青梅煮码
2023/03/13
1.7K0
vue-cli3项目搭建配置以及性能优化
vue3+ts+element-plus 后端管理系统系列一(简介)
vue3-composition-admin 是一个管理端模板解决方案,它是基于vue3,ts和element-plus,项目都是以composition api风格编写。
星宇大前端
2021/02/02
10.3K1
Vue+ElementUI 搭建后台管理系统(实战系列八)
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看。
王小婷
2021/11/24
7760
Vue+ElementUI 搭建后台管理系统(实战系列八)
vue vue-clie多环境配置
键:环境名,在运行命令的时候使用,如:npm run serve01就是执行该键所对应的值命令 值:vue-cli-service命令;serve表示是运行还是打包,serve表示是编译运行,build则是进行打包;--mode serve_01表示环境的模式名字,在创建配置文件的时候作为区分。
小蔚
2021/03/11
7380
vue    vue-clie多环境配置
vite开发环境、生产环境配置
一个项目可能会有开发版本、上线版本、测试版本等等多个版本,不同的环境会有不同请求api接口,就需更改一些基本配置,这时候就显得很麻烦,所以这里就使用了环境变量。我们只需做简单的配置,把环境状态切换的工作交给代码。
小蔚
2023/11/03
2.4K0
vite开发环境、生产环境配置
CROSS-ENV不同环境配置
项目背景 为了适应h5环境搭建需求,需要动态配置开发,测试,生产三种对应域名及其及打包命令。使用cross-env可以让配置环境更加清晰明了还好管理。 简介 cross-env的作用是不需要全局配置NODE_ENV在scripts脚本中修改NODE_ENV的值从而实现不同环境中proccess.env.NODE_ENV的不同,而config的工作原理就是基于NODE_ENV这个值的,所以推荐两者结合使用。 安装 cross-env
我不是费圆
2020/10/09
4.9K0
vue-cli3分环境打包,不压缩包大小问题
地址: https://cli.vuejs.org/zh/guide/mode-and-env.html
王念博客
2019/07/25
2.7K0
vue cli3 开发环境与生产环境配置(一)
初始化项目 vue create vue-asgisn cd vue-asgisn npm run serve 一、 已经初始化项目后, 为了开发方便以及维护, 新增一些文件夹 - store
yangdongnan
2019/04/22
5.8K0
vue cli3 开发环境与生产环境配置(一)
相关推荐
vue cli3 build 区分测试环境和生产环境
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验