VUE 3多环境配置(非常规的骚操作)

常规操作
这是一个通过修改vue.config.js来替代新建env文件配置环境变量的方法,这样能减少配置文件数量,减少根目录文件数量,让配置更易阅读和修改,让目录和代码更清爽。(这都是主观感受,欢迎小伙伴轻拍)

修改package.json

通过vue-cli-service --mode local来指定是哪个运行环境

"scripts": {
  "serve-local": "vue-cli-service serve --port 8806 --mode local",
 "serve-dev": "vue-cli-service serve --port 8806 --mode development",
 "serve-prod": "vue-cli-service serve --port 8806 --mode production",
 "build": "vue-cli-service build --mode production",
 "lint": "vue-cli-service lint"
},

添加.env文件

为每个mode新建一个.env.[mode]的文件,值env文件里面指定变量,

VUE_APP_SERVER_URL = "localUrl"
....

项目中运用

比如在config.js中导入环境变量

export const SERVICE_URL = process.env.VUE_APP_SERVICE_URL;
问题
  1. 每个mode都对应一个env文件,local,dev,prod三种模式就是3个文件,如果再还有别的测试服务器还的再加文件
  2. env默认在根目录,如果能专门建个env文件夹感觉会更好。
  3. env文件都是文本显示,不易阅读和修改
骚操作解决方法

修改package.json

和常规操作一样

修改vue.config.js

通过process.VUE_CLI_SERVICE.mode来获取--mode的传值,根据mode值来通过js的方法来设置环境变量。如果配置环境变量只写到vue.config.js文件下不优雅,小伙伴可以自行通过js的方式来组织环境变量的文件,欢迎小伙伴举一反三

const mode = process.VUE_CLI_SERVICE.mode
console.log("mode=", mode);
if(mode == "local"){
    process.env.VUE_APP_SERVICE_URL = "localUrl"
    process.env.VUE_APP_PLATFORM = "/same"
}else if(mode == "development"){
    process.env.VUE_APP_SERVICE_URL = "devUrl"
    process.env.VUE_APP_PLATFORM = "/same"
}else if(mode == "production"){
    process.env.VUE_APP_SERVICE_URL = "prodUrl"
    process.env.VUE_APP_PLATFORM = "/same"
}
module.exports = {
    publicPath : './'
};

不知道这样配置环境变量是不是舒适一些?欢迎小伙伴留下宝贵的意见和建议!

项目中运用

和常规用法一样

如果您感到有帮助请发请点赞
原文链接:segmentfault.com

上一篇:大咖风采 | 中国出口信用保险公司的 DevOps 落地之道
下一篇:JavaScript&jQuery的使用相关问题

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    4 天前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    9 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    5 个月前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    23 天前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    6 天前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设置...

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 2、出现问题的代码点 3、替代方案: 把import() 替换成如下: Promise.resolve().then(()=&...

    5 个月前

官方社区

扫码加入 JavaScript 社区