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中substring和substr的详细介绍与用法
Aug 29 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
js实现选项卡效果
Mar 07 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
微信小程序实现购物车功能
Nov 18 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实现自动登入google play下载app report的方法
2014/09/23 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python dumps和loads区别详解
2020/02/04 Python
python中可以声明变量类型吗
2020/06/18 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
项目总经理岗位职责
2014/02/14 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
大气污染防治方案
2014/05/19 职场文书
西岭雪山导游词
2015/02/06 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python