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 继承的实现
Jul 09 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
javascript每日必学之封装
Feb 23 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
js实现简单选项卡功能
Mar 23 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中的Memcache详解
2014/04/05 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python排序方法实例分析
2015/04/30 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python读写配置文件操作示例
2019/07/03 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
类如何去实现接口
2013/12/19 面试题
财务管理专业毕业生求职信
2014/06/02 职场文书
垃圾桶标语
2014/06/24 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
六查六看剖析材料
2014/10/06 职场文书
民事起诉书范本
2015/05/19 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
css3新特性的应用示例分析
2022/03/16 HTML / CSS