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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javascript Demo模态窗口
Dec 06 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
Vue项目分环境打包的实现步骤
Apr 02 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
JS 判断代码全收集
2009/04/28 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Python2包含中文报错的解决方法
2018/07/09 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
澳大利亚家具商店:Freedom
2020/12/17 全球购物
医校毕业生自我鉴定
2014/01/25 职场文书
绿色学校实施方案
2014/03/31 职场文书
应届大学生求职信
2014/07/20 职场文书
倡议书的写法
2014/08/30 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书