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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
vue请求数据的三种方式
Mar 04 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 header示例代码(推荐)
2010/09/08 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python 装饰器的使用示例
2020/10/10 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
大学生毕业自我评价范文分享
2013/11/11 职场文书
小学教师管理制度
2014/01/18 职场文书
社区八一活动方案
2014/02/03 职场文书
社区平安建设方案
2014/05/25 职场文书
航空学院求职信
2014/06/11 职场文书
订货会邀请函
2015/01/31 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
图书馆义工感想
2015/08/07 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android