当前位置: 首页 > news >正文

env的配置问题

做项目的时候遇到了这个问题,所以写一篇博客记录一下
开始的时候是直接将公共路径像开发的时候的地址和图片路径都写在Global.vue组件里面的,这么写确实没什么问题,只不过在npm run build的时候需要修改一些配置,会造成一些不必要的麻烦

<script>
	var BASE_URL = {
    //开发环境打开
    /* "user": "/backend", */
    //预发布环境打开
    "user": '',
    //公用的图片路径
    "image_url": ""
  }

	export default { //将常量输出出去
		BASE_URL,
	}
</script>

然后在打包的时候需要将一个注释掉放到服务器才能请求到数据,不然会发现请求路径错误,每次都需要手动修改,无疑是很麻烦的,有时候忘记了,还会增加工作量,所以可以配置一个.env文件,向下面这样写三个文件,都放在文件的根目录下

在这里插入图片描述

在.env文件中其实应该可以不写任何内容(因为我不写确实也可以运行),还有这几个文件的内容有限制,一般都是以VUE_APP开头,我没太过了解,如果有需要可以去看大佬的博客,我这个只是最简单的配置,然后能跑项目的

.env的配置

//可以放一个不区分环境的默认连接,也可以不写
VUE_APP_URL=''

.env.development的配置

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
VUE_APP_BASE_API ='/backend'

NODE_ENV就是说明这个是什么环境,然后BUE_APP_TITLE在确认这个环境的名字,不写也没事,写的话最好和文件的后缀一样,然后就写开发环境的路径,因为我在vue.config.js里面配置了反向代理,所以只写/backend就可以了

.env.production的配置

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
VUE_APP_BASE_API = ''

然后就基本配置完了,因为在npm run serve的时候默认是development的环境,npm run build会变成production的环境,不用配置其他了,如果还要加多,就可以在package.json文件里面配置一些东西,比如我的只有两个环境,然后我就在package.json里面修改了一下

"scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "deve": "vue-cli-service serve --mode development",
   "prod": "vue-cli-service build --mode production"
 },

这个配置注意的问题就是–mode后面的单词就是.env后面的单词,然后用npm run deve就去找.env,developement这个文件,然后实行的效果和npm run serve是一样的,另一个也同理,然后就算配置再多的环境也不会出问题了,也不用频繁的修改去浪费时间

相关文章:

  • 备忘:spring jdbc事务代码 mybatis, nhibernate
  • vue实现多页面的一些问题解决
  • 原型链的理解(全面)
  • oracle check if the display variable is set
  • git项目创建过程
  • initramfs.img,ramdisk 文件解压与压缩
  • win7 Ubuntu双系统重装win7后Ubuntu引导消失
  • java Service warpper安装说明
  • 奇偶剪枝-优化(ZOJ 2110 , HDU 1010)
  • 全引用与部分引用
  • CodeForces 606C
  • 初探MongoDB:暴力美学
  • POJ 1006(中国剩余定理)
  • c++ algorithm中常用的几个内置函数
  • circularprogressbar/smoothprogressbar开源视图使用学习
  • [case10]使用RSQL实现端到端的动态查询
  • 【知识碎片】第三方登录弹窗效果
  • ES6简单总结(搭配简单的讲解和小案例)
  • Flannel解读
  • HTTP中GET与POST的区别 99%的错误认识
  • Intervention/image 图片处理扩展包的安装和使用
  • iOS筛选菜单、分段选择器、导航栏、悬浮窗、转场动画、启动视频等源码
  • iOS小技巧之UIImagePickerController实现头像选择
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • node-glob通配符
  • SOFAMosn配置模型
  • Transformer-XL: Unleashing the Potential of Attention Models
  • vue 配置sass、scss全局变量
  • vue.js框架原理浅析
  • Vue小说阅读器(仿追书神器)
  • 从伪并行的 Python 多线程说起
  • 将 Measurements 和 Units 应用到物理学
  • 聚簇索引和非聚簇索引
  • Java总结 - String - 这篇请使劲喷我
  • MPAndroidChart 教程:Y轴 YAxis
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​人工智能之父图灵诞辰纪念日,一起来看最受读者欢迎的AI技术好书
  • #pragma multi_compile #pragma shader_feature
  • #pragma once与条件编译
  • ()、[]、{}、(())、[[]]命令替换
  • (1)Nginx简介和安装教程
  • (C语言)球球大作战
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第3章 信息系统治理(一)
  • (免费领源码)python#django#mysql校园校园宿舍管理系统84831-计算机毕业设计项目选题推荐
  • **Java有哪些悲观锁的实现_乐观锁、悲观锁、Redis分布式锁和Zookeeper分布式锁的实现以及流程原理...
  • *1 计算机基础和操作系统基础及几大协议
  • ..回顾17,展望18
  • ./configure,make,make install的作用(转)
  • .Net mvc总结
  • .net 程序 换成 java,NET程序员如何转行为J2EE之java基础上(9)
  • .net 前台table如何加一列下拉框_如何用Word编辑参考文献
  • .NET框架设计—常被忽视的C#设计技巧
  • .NET命令行(CLI)常用命令