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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
微信小程序实现时间戳格式转换
Jul 20 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
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
JavaScript splice()方法详解
2020/09/22 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
Python基于DES算法加密解密实例
2015/06/03 Python
Python os模块学习笔记
2015/06/21 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python 实现list或string按指定分段
2019/12/25 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
python中def是做什么的
2020/06/10 Python
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
出国签证在职证明
2014/01/16 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers