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 相关文章推荐
原生js 秒表实现代码
Jul 24 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 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除数取整示例
2014/04/24 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
jQuery each()小议
2010/03/18 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
Python进程间通信用法实例
2015/06/04 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
python实现机器人卡牌
2019/10/06 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
枚举与#define宏的区别
2014/04/30 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
出纳的岗位职责
2013/11/09 职场文书
学校司机岗位职责
2013/11/14 职场文书
企业给企业的表扬信
2014/01/13 职场文书
学生会副主席竞聘书
2014/03/31 职场文书