前端项目上线的时候 , 不可避免的会考虑到不同的运行环境需要前端请求不同服务地址的问题
本篇介绍使用配置文件.env.xxx
的方式实现多环境打包
一、首先先安装vue-cli3
npm install -g @vue/cli
然后使用vue --version
查看当前版本,如下图所示:
二、配置多环境文件
1. 配置package.json文件
打开package.json
文件,如下图所示
其中
scripts
中的内容,就是运行、打包时配置的命令
2. 配置环境
在scripts
中新增一条键值对
"serve01": "vue-cli-service serve --mode serve_01",
键:环境名,在运行命令的时候使用,如:npm run serve01
就是执行该键所对应的值命令
值:vue-cli-service
命令;serve
表示是运行还是打包,serve表示是编译运行,build则是进行打包;--mode serve_01
表示环境的模式名字,在创建配置文件的时候作为区分。
上述命令则是新建一个运行环境,模式名字为serve_01
的环境。
3. 新建该环境的配置文件
新建一个文件名为.env.serve_01
的文件,其中文件的serve_01
对应的就是scripts
中serve01
环境的--mode
值。
文件.env.serve_01
中配置如下:
NODE_ENV='dev'
VUE_APP_BASE_SERVER='serve00001这是运行环境呀'
VUE_NAME='我的名字名字'
配置文件中变量注意事项
-
NODE_ENV
:每个环境都存在的变量,在代码中用于区分当前的运行环境,默认如果不写时,serve命令下的NODE_ENV
值为development
,build命令下的NODE_ENV
值为production
。如果复写了此变量,则会使用复写的值。调用方法process.env.NODE_ENV
- 变量命名:只有以
VUE_APP_
开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。其他的命名则访问不到!调用方法process.env.VUE_APP_XXX
。
4. 运行测试
运行npm run serve01
调用
结果
可以看到,NODE_ENV
被复写了,非VUE_APP_
开头的变量不会被编译加载出来。
三、其他
打包模式该如何配置?打包到不同的文件夹又怎么配置?
一行命令和一个配置文件就能轻松搞定
scripts命令:
"build01": "vue-cli-service build --mode build_01 --dest build01"
。
解析:一个build01
的打包(build
)命令,模式为build_01
(表示配置文件的模式名字也为build_01
),打包输出到build01
文件夹中(--dest
则表示打包输出的文件夹名字)-
env配置文件(文件名:
.env.build_01
)NODE_ENV='pro' VUE_APP_BASE_SERVER='这是生产环境001'
-
测试运行
可以看到,测试没有问题
这样就很轻松的解决了以上问题!是不是很开心~