vue-cli3环境变量与分环境打包的方法示例


Posted in Javascript onFebruary 18, 2019

第一步 : 了解环境变量概念

我们可以根目录中的下列文件来指定环境变量:

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

环境变量文件只包含环境变量的“键=值”对:

FOO=bar
VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用

除了 自定义的VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量:

  • NODE_ENV - 会是 "development"、"production" 或 "test"中的一个。具体的值取决于应用运行的模式。
  • BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径。

为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

模式概念:

模式是 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

模式不等同于 NODE_ENV,一个模式可以包含多个环境变量。也就是说,每个模式都将 NODE_ENV的值设置为模式的名称(可重新赋值更改)——比如在 development 模式下 NODE_ENV 的值会被设置为 "development"。

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如,如果你在项目根目录创建一个名为 .env.development 的文件,那么在这个文件里声明过的变量就只会在 development 模式下被载入。

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量,请在你的 package.json 脚本中加入:

"dev-build": "vue-cli-service build --mode development",

环境变量的使用 :

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中(即在项目代码中使用)。你可以在应用的代码中这样访问它们:

console.log(process.env.VUE_APP_SECRET)

理解指令 , 模式 , 环境变量之间的关系

我们在项目中的package.json经常能看见以下这样的指令

vue-cli3环境变量与分环境打包的方法示例

在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

vue-cli-service serve

用法:vue-cli-service serve [options] [entry]
选项:
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值:development)
--host 指定 host (默认值:0.0.0.0)
--port 指定 port (默认值:8080)
--https 使用 https (默认值:false)

vue-cli-service build

用法:vue-cli-service build [options] [entry|pattern]
选项:
--mode 指定环境模式 (默认值:production)
--dest 指定输出目录 (默认值:dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值:app)
--name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化

以上是两个常用的cli指令 , 他们默认对应的分别是development和production模式 , 如果还想了解其他指令 , 可以访问: https://cli.vuejs.org/zh/guide/cli-service.html#cli-%E6%9C%8D%E5%8A%A1 CLI 服务

那么接下来 , 我们就开始创建一个用于打包测试环境的模式;

修改package.json

添加一行命令

"test": "vue-cli-service build --mode test"

添加.env.test文件

在项目根路径创建.env.test文件,内容为

NODE_ENV='production' //表明这是生产环境(需要打包)
VUE_APP_CURRENTMODE='test' // 表明生产环境模式信息
VUE_APP_BASEURL='http://***.****.com:8000' // 测试服务器地址

修改项目中的api接口文件

在我的项目中,一般会创建一个api.js 来管理所有的接口url

因为我们在本地开发环境中是通过代理来连接服务器的,所以将url写成这

`${baseUrl}/apis/v1/login`,

在文件开头通过环境变量改变baseUrl

let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
 baseUrl = "" 
} else if (process.env.NODE_ENV == 'production') {
 baseUrl = process.env.VUE_APP_BASEURL
} else {
 baseUrl = "" 
}

当需要为测试环境进行打包的时候 , 我们只需要运行下面指令进行打包

npm run test

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
js转html实体的方法
Sep 27 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 #Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 #Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 #Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 #Javascript
深入理解vue-class-component源码阅读
Feb 18 #Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 #Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
You might like
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
深入分析php之面向对象
2013/05/15 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
华为慧通面试题
2012/09/11 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
医药大学生求职简历的自我评价
2013/10/17 职场文书
自我鉴定写作要点
2014/01/17 职场文书
保安公司服务承诺书
2014/05/28 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
投资合作意向书范本
2015/05/08 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python
Python进程池与进程锁之语法学习
2022/04/11 Python