vue根据不同环境进行编译打包

工作中我们在开发过程中，有很多的开发环境，如果我们不进行统一配置，那么我们只能手动进行更改，这样会给我们带来诸多不便，所以我们要配置根据不同的环境来进行编译打包.

先看一下我的项目目录：

在config文件内新建test.env.js文件：

'use strict'

module.exports = {

   NODE_ENV: '"testing"',

   ENV_CONFIG:'"test"'

}

修改config内的prod.env.js文件：

'use strict'

module.exports = {

   NODE_ENV: '"production"',

   ENV_CONFIG:'"prod"'

}

对build中webpack.prod.conf.js做如下修改：

const env = config.build[process.env.env_config+'Env']

config中的index.js 文件中build部分代码修改如下：

build: {

   prodEnv: require('./prod.env'),

   testEnv: require('./test.env'),

   // Template for index.html

   index: path.resolve(__dirname, '../dist/index.html'),

// ····余下的代码就不写了

}

确认安装cross-env

npm install cross-env –save-dev

对build文件夹下的build.js的修改：

'use strict'

require('./check-versions')()

// process.env.NODE_ENV = 'production'   //注释掉

const ora = require('ora')

const rm = require('rimraf')

const path = require('path')

const chalk = require('chalk')

const webpack = require('webpack')

const config = require('../config')

const webpackConfig = require('./webpack.prod.conf')

// const spinner = ora('building for production...')   //注释掉

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

spinner.start()

修改package.json文件（在script里面添加）：

"scripts": {

  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

  "start": "npm run dev",

  "unit": "jest --config test/unit/jest.conf.js --coverage",

  "e2e": "node test/e2e/runner.js",

  "test": "npm run unit && npm run e2e",

  "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",

  "build": "node build/build.js",

  "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",

  "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"

},

在utils文件下新建env.js，对环境进行判断并切换，内容如下：

/*

 * 配置编译环境和线上环境之间的切换

 * baseUrl: 域名地址

 * routerMode: 路由模式

 */

let baseUrl = '';

let routerMode = 'history';

let DEBUG = false;

let cancleHTTP = [];//取消请求头设置；

//注：下面的baseUrl地址为假地址，只是模拟的，无法调通。

if (process.env.NODE_ENV == 'development') {

   baseUrl = "https://10.248.65.100/GetTravelMethod";

   DEBUG = true;

}else if(process.env.NODE_ENV == 'production'){

   baseUrl = "https://10.248.65.200/GetTravelMethod";

   DEBUG = false;

}else if(process.env.NODE_ENV == 'testing'){

   baseUrl = "https://10.248.65.150/GetTravelMethod";

   DEBUG = false;

}

export{

   baseUrl,

   routerMode,

   DEBUG,

   ROLE,

   cancleHTTP

}
在拦截器中配置

test环境下则运行：

npm run build--test

production环境则运行：

10.

npm run build--prod

好了，这就是配置步骤了。

巴特西

vue根据不同环境进行编译打包

最新文章

热门文章