vue脚手架项目中使用cross-env分环境打包

King

一、需求背景

　　在项目开发的不同阶段网络请求的baseUrl一般都是不同的，例如在我写按摩椅项目的时候，有dev环境，test环境，最后才是生产环境。因为是移动端项目涉及到微信和支付宝的支付，所以必须要有测试环境，先测试没有问题了然后再部署到正式环境上，那么这两个不同的baseUrl怎么切换呢？这就是下文要讲的。　　　　　　

二、一般的实现方式

　　常规的做法是设置一个常量，根据不同的常量值，进入不同的if语句中，如下：　

//常规的做法
let mode="dev"; //可以设置：dev、test、prod
let baseUrl="";

if(mode=="dev"){
  baseUrl=="http://api.xmdev.com";
}else if(mode=="test"){
  baseUrl=="http://api.xmtest.com";
}else {
  baseUrl=="http://api.xmprod.com";
}

export {
  baseUrl
}

知识兔

　　这种做法基本需求是实现了，但是如果有一天老大突然说，我们这个项目要开始做持续集成，代码在本地跑成功没有bug以后，上传源码到服务器通过执行脚本直接编译打包，然后通过nginx指向编译后的index.html文件部署就ok了。这个时候上面的这种常规做法显然就行不通了。

　　这里我介绍一个第三方库来实现上面的需求：cross-env

三、使用cross-env第三方库实现

　 cross-env官方的介绍是：跨平台环境脚本的设置，你可以通过一个简单的命令（设置环境变量）而不用担心设置或者使用环境变量的平台。

　　话不多说，根据上面的需求来看看这里应该怎么实现，目前我们有三个环境：开发、测试、正式。根据不同环境配置不同的地址。下面是具体的使用步骤

（一）、安装依赖

npm install --save-dev cross-env

知识兔

（二）、添加test.env.js文件

'use strict';
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG:'"test"'
};

知识兔

（三）、修改prod.env.js文件

'use strict';
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG:'"prod"'
};

知识兔

（四）、修改build目录下webpack.prod.conf.js文件

// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env'];

知识兔

（五）、修改config目录下index.js文件

build: {
    //添加下面两行代码
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    // Template for index.html
    index:
      path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...................  
}

知识兔

（六）、修改build目录下build.js文件

// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' );

知识兔

（七）、修改package.json文件

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js", // npm run build--test  测试环境打包
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"  // npm run build--prod  //生产环境打包
  },

知识兔

（八）、修改common/js 目录下的config.js文件

if (process.env.NODE_ENV == 'development') {
  baseUrl = "http://api.xmdev.com";
} else if (process.env.NODE_ENV == 'production') {
  baseUrl = "http://api.xmprod.com";
} else if (process.env.NODE_ENV == 'testing') {
  baseUrl = "http://api.xmtest.com";
}

知识兔

（九）、测试

　　开发环境直接在本地 run dev 很容易看到效果。

　　测试环境和正式环境，需要在本地启一个tomcat服务，如何在本地启动tomcat服务这里就不叙述了。

　　执行 “npm run build--test"以后将编译好的文件放到tomcat的webapp/ROOT目录下就行了。

　　再执行“npm run build--prod"以后将编译后的文件放到webapp/ROOT下面，就可以看到下面api了。再正式开发的过程中，baseUrl往往是被引入网络封装库中。

　　项目已经上传到github上，有需要的同学可以下载下来瞅瞅：CrossEnvDemo

四、再说一点

　　有时候，正式环境的地址是：http://www.xmtech.com。在弄测试环境的时候为了简化，后端同学就直接用nginx做一个重定向，然后就有了测试环境地址:http://www.xmtech.com/test/index.html。在这个时候webpack的配置文件中，就要根据具体情况作出修改，否则部署以后页面就会空白，因为编译后的资源文件找不到了

　　在webpack.base.conf.js文件中，要根据具体情况作出修改。

let assetPublicPath;
if (process.env.env_config == 'test') {
  assetPublicPath='/test/'
}else if(process.env.env_config == 'prod'){
  assetPublicPath=config.build.assetsPublicPath;
}else{
  assetPublicPath=config.dev.assetsPublicPath;
}

知识兔

计算机

2022年2月02日