vue-cli3 配置开发与测试环境详解


Posted in Javascript onMay 17, 2019

需求

首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测试环境部署在名为 test 的子目录下,根据生产环境和测试环境的不同,某些界面和交互有细微的差别。

根据以上项目的基本情况,分析出需求如下:

  • 实现区分线上生产环境和线上测试环境的环境变量,供项目代码中全局使用。
  • 实现输入一行命令,执行两条指令,分别打包线上生产环境和线上测试环境的代码。
  • 实现打包之后,自动将打包好的文件夹分别按照项目名+时间+环境的格式压缩成 zip 文件

配置环境变量和模式

根据 vue-cli3 文档,可以通过设置项目根目录下的 .env,.env.[mode] 文件来指定环境变量。

创建一个 .env 和 .env.beta 文件,在 .env 文件中,配置如下:

VUE_APP_URL = '/' // 用来设置项目的 baseUrl 和路由的 base 选项 默认是根目录
VUE_APP_MODE = '' // 设置一个变量 区分线上生产环境和线上测试环境 默认是生产环境
outputDir = 'dist' // 用来设置打包后生成的文件夹的名字,默认为 dist 文件夹

在 .env.beta 文件中,配置线上测试环境,如下:

NODE_ENV = 'production' // 因为是打包项目 所以 NODE_ENV 还是 production
VUE_APP_URL = '/test/' // 线上测试环境,部署在 test 目录下 
VUE_APP_MODE = 'test' // 这个变量表示当前是线上测试环境
outputDir = 'beta'  // 将线上测试环境打包后生成的代码放在 beta 文件夹下,以示区别。

定义好环境变量之后,把项目制定的路径配置到路由和 vue 配置文件中去:

// router.js
export default new Router({
 base: process.env.VUE_APP_URL,
 ...
})

// vue.config.js
module.exports = {
 baseUrl: process.env.VUE_APP_URL, // 从 Vue CLI 3.3 起已弃用,改成publicPath
}

在项目代码中,可以在任意位置使用 process.env.VUE_APP_MODE 的值来判断是线上生产环境还是线上测试环境,用以编写不同的业务代码。例:

if(process.env.VUE_APP_MODE == 'test'){
 this.name = '线上测试用户'
}

配置好不同模式的环境变量之后,在 package.json 里面设置一个 beta 模式:

{
 "scripts": {
  ...
  "beta": "vue-cli-service build --mode beta"
 }
}

这样配置完之后,在命令行运行 npm run beta ,会在根目录下生成一个 beta 文件夹,里面就是打包出来的线上测试版本的项目文件。

至此就完成了分环境配置打包,但是这样的麻烦点在于,每次要在命令行输入两次命令,因为我们的项目文件都是发送给后端去部署,所以还需要把文件压缩成 zip,每次都要手动操作,是在有点累。所以,还需要进行一些小小的改造,彻底解放俺们的双手~~

合并构建打包命令并且自动生成压缩文件

将两个命令合并成一个很简单,只需要在 package.json 里面配置一下,新建一个新的命令用于同时调用两个命令。

{
 "scripts": {
  ...
  "beta": "vue-cli-service build --mode beta",
  "publish": "vue-cli-service build && vue-cli-service build --mode beta"
 }
}

这样配置好之后,只要执行npm run publish, 它会自动先执行正式环境构建打包,完成之后再自动执行测试环境的构建打包,hin是方便~~

接着再配置自动压缩,这里就需要使用到一个 webpack 的插件 — filemanager-webpack-plugin。

先安装,可以在命令行安装,也可以直接在 vue-cli3 自带的图形管理界面搜索安装,都挺方便。

npm install filemanager-webpack-plugin -dev

安装完成之后,在 vue.config.js 里面配置一下这个插件,它提供了丰富的操作文件的选项 ,这里我只需要使用删除和压缩:

let ts = Date.parse(new Date());
module.exports = {
 ...,
 chainWebpack: (config) => {
    if(process.env.VUE_APP_MODE == 'test'){
   config.plugin('compress')
    .use(FileManagerPlugin, [{
     onEnd: {
      delete: [ //首先需要删除项目根目录下的dist.zip
      './*.zip',
      ],
      archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
      {source: './dist', destination: `./biProject-${ts}-production.zip`},
      {source: './beta', destination: `./biProject-${ts}-test.zip`}
      ]
     }
    }])
  }
 }
}

PS:vue-cli3开发环境与生产环境的区分

在vue-cli3的项目中,

npm run serve时会把process.env.NODE_ENV设置为‘development';

npm run build 时会把process.env.NODE_ENV设置为‘production';

vue-cli3 配置开发与测试环境详解

或,配置publicPath等:

publicPath: process.env.NODE_ENV === 'production' ? 'https://cdn.xxx.com/folder' : '';

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

Javascript 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
offsetParent 算法分析
Apr 05 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #Javascript
微信小程序如何使用云开发
May 17 #Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 #Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 #Javascript
JS简单数组排序操作示例【sort方法】
May 17 #Javascript
微信小程序云开发(数据库)详解
May 17 #Javascript
JS实现的自定义map方法示例
May 17 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php 保留小数点
2009/04/21 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
js脚本实现数据去重
2014/11/27 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python妙用之编码的转换详解
2017/04/21 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
专业实习自我鉴定
2013/10/29 职场文书
销售主管岗位职责
2014/02/08 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang