配置文件

鄙人已付费购买,粘贴出来给更多前端爱好者学习。若掘金小册禁止此类操作,请联系

在实际项目的开发中,我们一般会经历项目的开发阶段、测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢?这里就需要引入环境的概念。

一般一个项目都会有以下 3 种环境:

开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能)

测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别)

生产环境(上线阶段,正式对外发布的版本,一般会进行优化,关掉错误报告)

作为一名开发人员,我们可能需要针对每一种环境编写一些不同的代码并且保证这些代码运行在正确的环境中,那么我们应该如何在代码中判断项目所处的环境同时执行不同的代码呢?这就需要我们进行正确的环境配置和管理。

介绍

1. 配置文件

正确的配置环境首先需要我们认识不同环境配置之间的关系,如图所示:




我们从上图中可以了解到每一个环境其实有其不同的配置,同时它们也存在着交集部分,交集便是它们都共有的配置项,那么在 Vue 中我们应该如何处理呢?

我们可以在根目录下创建以下形式的文件进行不同环境下变量的配置:

.env# 在所有的环境中被载入

.env.local# 在所有的环境中被载入,但会被git忽略

.env.[mode]# 只在指定的模式中被载入

.env.[mode].local# 只在指定的模式中被载入,但会被git忽略

比如我们创建一个名为 .env.stage 的文件,该文件表明其只在 stage 环境下被加载,在这个文件中,我们可以配置如下键值对的变量:

NODE_ENV=stage

VUE_APP_TITLE=stage mode

这时候我们怎么在 vue.config.js 中访问这些变量呢?很简单,使用process.env.[name]进行访问就可以了,比如:

// vue.config.js

console.log(process.env.NODE_ENV);// development(在终端输出)

当你运行yarn serve命令后会发现输出的是 development,因为vue-cli-service serve命令默认设置的环境是 development,你需要修改 package.json 中的 serve 脚本的命令为:

"scripts": {

"serve":"vue-cli-service serve --mode stage",

}

--mode stage其实就是修改了 webpack 4 中的 mode 配置项为 stage,同时其会读取对应 .env.[model] 文件下的配置,如果没找到对应配置文件,其会使用默认环境 development,同样vue-cli-service build会使用默认环境 production。

这时候如果你再创建一个 .env 的文件,再次配置重复的变量,但是值不同,如:

NODE_ENV=staging

VUE_APP_TITLE=staging mode

VUE_APP_NAME=project

因为 .env 文件会被所有环境加载,即公共配置,那么最终我们运行vue-cli-service serve打印出来的是哪个呢?答案是stage,但是如果是 .env.stage.local 文件中配置成上方这样,答案便是staging,所以 .env.[mode].local 会覆盖 .env.[mode] 下的相同配置。同理 .env.local 会覆盖 .env 下的相同配置。

由此可以得出结论,相同配置项的权重:

.env.[mode].local>.env.[mode]>.env.local>.env

但是需要注意的是,除了相同配置项权重大的覆盖小的,不同配置项它们会进行合并操作,类似于 Javascript 中的 Object.assign 的用法。

2. 环境注入

通过上述配置文件的创建,我们成功使用命令行的形式对项目环境进行了设置并可以自由切换,但是需要注意的是我们在 Vue 的前端代码中打印出的process.env与 vue.config.js 中输出的可能是不一样的,这需要普及一个知识点:webpack 通过 DefinePlugin 内置插件将 process.env 注入到客户端代码中。

// webpack 配置

{

    ...


    plugins: [

newwebpack.DefinePlugin({

'process.env': {

NODE_ENV:JSON.stringify(process.env.NODE_ENV)

            }

        }),

    ],


    ...

}

由于 vue-cli 3.x 封装的 webpack 配置中已经帮我们完成了这个功能,所以我们可以直接在客户端代码中打印出 process.env 的值,该对象可以包含多个键值对,也就是说可以注入多个值,但是经过 CLI 封装后仅支持注入环境配置文件中以VUE_APP_开头的变量,而NODE_ENV和BASE_URL这两个特殊变量除外。比如我们在权重最高的 .env.stage.local 文件中写入:

NODE_ENV=stage2

VUE_APP_TITLE=stage mode2

NAME=vue

然后我们尝试在 vue.config.js 中打印process.env,终端输出:

{

    ...


npm_config_ignore_scripts:'',

npm_config_version_git_sign:'',

npm_config_ignore_optional:'',

npm_config_init_version:'1.0.0',

npm_package_dependencies_vue_router:'^3.0.1',

npm_config_version_tag_prefix:'v',

npm_node_execpath:'/usr/local/bin/node',

NODE_ENV:'stage2',

VUE_APP_TITLE:'stage mode2',

NAME:'vue',

BABEL_ENV:'development',


    ...

}

可以看到输出内容除了我们环境配置中的变量外还包含了很多 npm 的信息,但是我们在入口文件 main.js 中打印会发现输出:

{

"BASE_URL":"/vue/",

"NODE_ENV":"stage2",

"VUE_APP_TITLE":"stage mode2"

}

可见注入时过滤调了非VUE_APP_开头的变量,其中多出的BASE_URL为你在 vue.config.js 设置的值,默认为 /,其在环境配置文件中设置无效。




3. 额外配置

以上我们通过新建配置文件的方式为项目不同环境配置不同的变量值,能够实现项目基本的环境管理,但是 .env 这样的配置文件中的参数目前只支持静态值,无法使用动态参数,在某些情况下无法实现特定需求,这时候我们可以在根目录下新建 config 文件夹用于存放一些额外的配置文件。

/* 配置文件 index.js */

// 公共变量

constcom = {

IP:JSON.stringify('xxx')

};

module.exports = {

// 开发环境变量

    dev: {

env: {

TYPE:JSON.stringify('dev'),

            ...com

    }

    },


// 生产环境变量

    build: {

env: {

TYPE:JSON.stringify('prod'),

            ...com

    }

    }

}

上方代码我们把环境变量分为了公共变量、开发环境变量和生产环境变量,当然这些变量可能是动态的,比如用户的 ip 等。现在我们要在 vue.config.js 里注入这些变量,我们可以使用 chainWebpack 修改 DefinePlugin 中的值:

/* vue.config.js */

constconfigs =require('./config');

// 用于做相应的 merge 处理

constmerge =require('webpack-merge');

// 根据环境判断使用哪份配置

constcfg = process.env.NODE_ENV ==='production'? configs.build.env : configs.dev.env;

module.exports = {

    ...


chainWebpack:config=>{

config.plugin('define')

.tap(args=>{

letname ='process.env';


// 使用 merge 保证原始值不变

args[0][name] = merge(args[0][name], cfg);


returnargs

            })

    },

    ...

}

最后我们可以在客户端成功打印出包含动态配置的对象:

{

"NODE_ENV":"stage2",

"VUE_APP_TITLE":"stage mode2",

"BASE_URL":"/vue/",

"TYPE":"dev",

"IP":"xxx"

}

4. 实际场景

结合以上环境变量的配置,我们项目中一般会遇到一些实际场景: 比如在非线上环境我们可以给自己的移动端项目开启vConsole调试,但是在线上环境肯定不需要开启这一功能,我们可以在入口文件中进行设置,代码如下:

/* main.js */

importVuefrom'vue'

importAppfrom'./App.vue'

importrouterfrom'./router'

importstorefrom'./store'

Vue.config.productionTip =false

// 如果是非线上环境,加载 VConsole

if(process.env.NODE_ENV !=='production') {

varVConsole =require('vconsole/dist/vconsole.min.js');

varvConsole =newVConsole();

}

newVue({

  router,

  store,

render:h=>h(App)

}).$mount('#app')

vConsole 是一款用于移动网页的轻量级,可扩展的前端开发工具,可以看作是移动端浏览器的控制台,如图:




另外我们还可以使用配置中的 BASE_URL 来设置路由的 base 参数:

/* router.js */

importVuefrom'vue'

importRouterfrom'vue-router'

importHomefrom'./views/Home.vue'

importAboutfrom'./views/About.vue'

Vue.use(Router)

letbase =`${process.env.BASE_URL}`;// 获取二级目录

exportdefaultnewRouter({

mode:'history',

base: base,// 设置 base 值

    routes: [

        {

path:'/',

name:'home',

component: Home

        },

        {

path:'/about',

name:'about',

component: About

        }

    ]

})

每一个环境变量你都可以用于项目的一些地方,它提供给了我们一种全局的可访问形式,也是基于 Node 开发的特性所在。

结语

环境的配置和管理对于项目的构建起到了至关重要的作用,通过给项目配置不同的环境不仅可以增加开发的灵活性、提高程序的拓展性,同时也有助于帮助我们去了解并分析项目在不同环境下的运行机制,建立全局观念。

思考 & 作业

webpack 通过 DefinePlugin 内置插件将 process.env 注入到客户端代码中时,process.env.NODE_ENV为什么要进行 JSON.stringify 处理?

process.env中如何获取 package.json 中 name 的值?

如何在 package.json 中的 scripts 字段中定义一些自定义脚本来切换不同的环境?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348