码迷,mamicode.com
首页 > 其他好文 > 详细

前端自动分环境打包(vue和ant design)

时间:2018-12-02 20:10:50      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:跨平台   测试的   修改   .com   var   ima   使用   issues   文档   

现实中的问题:有时候版本上线的时候,打包时忘记切换环境,将测试包推上正式服务器,那你就会被批了。

期望:在写打包的命令行的时候就觉得自己在打包正式版本,避免推包时候的,不确信自己的包是否正确。

既然有了期望,那么就要开始百度如何去实现呢。

下面先开始介绍ant design的方法:

ant design的打包工具是roadhog,那么从roadhog下手。

在roadhog文档中,发现define的配置可以传递给代码。

技术分享图片

在ant design pro的issue中搜索中,发现环境变量的配置

我这也不啰嗦了,直接贴代码了

技术分享图片

技术分享图片

那么介绍完ant disign的,开始介绍vue的吧

首先介绍下用的包吧,cross-env是为了解决跨平台的包,可以是命令行在window和mac上都可以使用。

第一步:

npm i --save-dev cross-env

第二步:

在根目录下的config下:新建一个test.env.js文件,对标已存在的prod.env.js的文件

use strict
module.exports = {
  NODE_ENV: "test"
}

在同级目录下的index.js中

技术分享图片

红色框的是新加的,在build对象中同样加入这两行代码,为了让在本地开发也可以切换正式测试的环境。

第三步

在根目录build文件夹下的的webpackage.prod.conf.js和webpackage.dev.conf.js文件中,获取刚才配置的test.env.js和prod.env.js

具体操作如下:

// const env = require(‘../config/prod.env‘)  注释这行原本的代码
const env = config.build[process.env.env_config+Env]  // 新加这行获取js的代码
new webpack.DefinePlugin({
      process.env: env // 将获取的js,放入process.env
    }),

同级目录下build.js

// 注释掉这行代码
// process.env.NODE_ENV = ‘production‘
// 修改spinner的定义
// const spinner = ora(‘building for production...‘)
var spinner = ora(building for  + process.env.NODE_ENV +  of  + process.env.env_config+  mode... )

第四步:

设置打包命令行和起本地服务的命令行

"dev:test": "cross-env NODE_ENV=development env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev:prod": "cross-env NODE_ENV=development env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",

第五部

在代码获取值

console.log(process.env);

以上就介绍完自动分环境打包

 

前端自动分环境打包(vue和ant design)

标签:跨平台   测试的   修改   .com   var   ima   使用   issues   文档   

原文地址:https://www.cnblogs.com/tzzf/p/10054763.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!