vue-cli3.0脚手架搭建项目区分生产与测试环境方案

最新推荐文章于 2023-03-01 09:44:48 发布
最新推荐文章于 2023-03-01 09:44:48 发布
阅读量312 收藏 2
点赞数 2
文章标签： vue-cli3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiudenggushijingguo/article/details/118193855
版权
本文介绍了如何在Vue CLI3项目中设置和区分测试与生产环境。通过配置不同的npm命令，如`npm run serve:dev`和`npm run build:prod`，并利用`.env.dev`和`.env.prod`文件设定环境变量，可以轻松地根据`process.env.NODE_ENV`切换请求URL，实现本地和线上环境的无缝对接。
摘要由CSDN通过智能技术生成

vue-cli3.0脚手架搭建项目区分生产与测试环境

项目中通常会区分测试环境与生产环境，现在介绍一下通过vue-cli3创建的项目如何区分生产和测试环境。

使用vue-cli3打包项目，通过配置不同的指令给项目设置不一样的配置。

npm run serve:dev时会把process.env.NODE_ENV设置为‘development’；
npm run serve:prod时会把process.env.NODE_ENV设置为‘production’；

npm run build:dev 时会把process.env.NODE_ENV设置为‘development’；
npm run build:prod 时会把process.env.NODE_ENV设置为‘production’；
在这里插入图片描述
此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。

步骤一

新建两个文件，.env.dev 和 .env.prod 内容分别为
NODE_ENV = development
NODE_ENV = production
在这里插入图片描述

步骤二

通过process.env.NODE_ENV拿到当前打包环境，根据不同的项目环境走不同的配置。
在这里插入图片描述

就等故事经过
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue:配置.env.dev文件不生效的问题
席木木的博客
06-18 5618
Vue项目的.env.dev文件配置如下，但是在启动项目之后，通过process.env.VUE_APP_SCISERVE获取到的变量值一直为undefined❓❓❓💢💢💢。
vue-cli3.0 脚手架搭建项目详解
渐渐高飞
12-01 1527
如果是刚入门同学先安装node.js 怎么安装node这里不做介绍了，网上教程很简单，下载node.js直接安装就可以 检查node 1、node -v 2、node检查无误，马上就可以开始构建项目了 a、安装vue-cli 3.0 // -g 是安装到全局目录，安装一次以后再构建项目就不用再装了 npm install -g @vue/cli b、...
【vue】使用vue-cli3.0/4.0搭建的项目如何区分环境
hello world_
11-30 1万+
前言 上一篇博客，我说了，最近公司是空闲期。基本都是处于浑水摸鱼阶段了，每天打卡上班，打卡下班 但是我是属于那种有点闲不住的人，总想搞点东西玩玩 所以我把公司的项目往 vue-cli4.0 进行了迁移（我原本真的只想迁移到 3.0） 可以参考vue-cli4.0快速搭建一个项目 迁移的过程可以说还算顺利，也没遇到什么麻烦，就是一些插件版本的升级问题 最近，有人私信问到了我关于 vue...
vue 项目dev/sit/uat环境判断
weixin_47239395的博客
08-17 1197
一般在utils文件夹下api.js文件里面写接口,接口环境判断 var href = window.location.href //两者都可以拿到当前运行URL链接 // var host = window.location.host let _ipcc_cst; const _sysServer = (/(creditcard.ecitic.com)/i.test(location.origin))?'https://creditcard.ecitic.com':'https://e.test.ban
vue3 .env 环境变量的配置及应用
这是个问题
11-18 3748
vue3 .env环境文件的配置与使用
vue3中.env.dev文件结合axios.defaults.baseURL的使用
u011200562的博客
10-25 2877
结构是这样的： 在项目里面新建.env.dev文件内容如下： NODE_ENV=development VUE_APP_SERVER=http://127.0.0.1:8880 VUE_APP_WS_SERVER=ws://127.0.0.1:8880 修改package.json 注意: 执行npm run serve-dev时 , --mode指定环境模式 dev(默认值：development),即执行.env.dev文件. 最后在main.js中修改axios的ba...
vue-cli3脚手架搭建项目
jslcc的博客
08-29 1126
vue-cli3脚手架搭建项目
vue-cli3.0配置demo更新
07-23
在 "vue-cli3.0配置demo更新" 中，我们将探讨 `vue.config.js` 文件的详细配置，以及如何配置别名、代理跨域和 devServer。 `vue.config.js` 是 Vue CLI 3.x 中的核心配置文件，允许开发者自定义项目的构建设置。在...
vue-cli3.0如何从零搭建项目
吴文静的博客
05-08 1852
如何搭建vue3.0项目 vue3.0的优点是更快更小，它重新审视了 vdom，更改了自身对于 vdom的对比算法。vdom从之前的每次更新，都进行一次完整遍历对比，改为了切分区块树，来进行动态内容更新。也就是只更新 vdom的绑定了动态数据的部分，把速度提高了6倍；把 definePerproty改为了 proxy，对于 JavaScript引擎更加友好，响应更加高效。加强了 typescrip...
vue3-后台管理项目-v3项目搭建
大姐的博客
02-16 1226
学完vue3，咱们总要巩固巩固知识吧，所以分享一篇vue3方法编写后台管理的相关项目，以及出现问题就解决问题的能力
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 1907
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
基于Vue CLI3 搭建五脏俱全的移动端H5应用
weixin_45556713的博客
09-26 1880
前言 之前开发vue项目，一直是自己搭建脚手架，并没有使用配套的Vue-CLI。一、是3.0之前的CLI无明显优势，配置繁琐；二、是觉得自己从零配置项目可控性更强。 Vue-CLI 3.0 于去年8月份就已发布，却一直没去了解。近日，有新Vue H5项目开发，就想着用Vue CLI3.0脚手架构建项目。并记录一下构建使用过程。 使用脚手架最好的参考就是官方文档，官方文档整体还是比较清晰明了的，更新...
Vue中.env|.env.development|.env.production文件说明
热门推荐
Amelian的博客
04-17 3万+
0.介绍 模式是Vue CLI项目中一个重要的概念，默认情况下，一个Vue CLI项目有三种模式： developemt 模式用于vue-cli-service serve test 模式用于vue-cli-service test:unit production 模式用于vue-cli-service build 和vue-cli-service test:e2e 当运行vue-cli-service命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含NODE_ENV变量，它的值取决
Vue项目 .env .env.development .env.production 配置说明
weixin_43190804的博客
12-16 8297
1.模式 模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式： development 模式用于 vue-cli-service serve production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e test 模式用于 vue-cli-service test:unit 你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量： vue-c
vue .env文件
xc_ling的博客
04-21 1万+
vue 配置生产环境和开发环境
vue3 中 .env环境变量使用
最新发布
社会人
03-01 1535
vue3 中 .env环境变量使用
【Vue】Webpack配置开发环境与正式环境:
SunPeng的博客
11-21 2626
【Vue】Webpack配置开发环境与正式环境:
.env.development（开发环境）、.env.prodction（正式环境）、自定义环境
qq_42855675的博客
03-01 2万+
文章目录1.配置文件：2.命名规则3.关于文件的加载使用自定义环境 1.配置文件：       .env.development：开发环境下的配置文件       .env.production：生产环境下的配置文件 2.命名规则       属性必须以VUE_APP_开头。 #开发环境下的配置文件 VUE_APP_ENV=dev
Vue进阶（环境变量 和 模式切换）（npm run dev与npm run serve的区别）
qq_41765777的博客
11-20 1万+
1、开发环境与生产环境切换 （1）根目录下新建 .env.dev文件和.env.prod环境变量文件如下： .env.dev文件 (开发环境模式下使用的环境变量） NODE_ENV = development VUE_APP_BASE_API = http://localhost:8088/api VUE_APP_BASE_IMG_URL = http://localhost:8088 .env.prod文件（生产环境模式下使用的环境变量） NODE_ENV = production VU
Vue-cli3.0配置实战与注意事项
"Vue CLI 3.0 是一个用于快速搭建 Vue.js 应用的脚手架工具，提供了便捷的新建项目、启动服务、打包构建等功能。本文将详细介绍Vue CLI 3.0的配置和使用中的注意事项，以及如何根据项目需求进行功能定制。" Vue CLI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值