vue极致打包_vue 打包部署多个环境

1：先下载 cross-env   npm install  --save-dev cross-env

2.1: 第一张方法:

在config文件夹里面，新建一个 test.env.js(自定义名字)，这里可以复制一份dev.env.js 里面的内容

'use strict'

const merge = require('webpack-merge')const devEnv = require('./dev.env')

module.exports=merge(devEnv, {

NODE_ENV:'"test"',

API_ROOT:'"http://bmh5.test.banmazgai.com/server"' //后台测试接口地址

})

修改prod.env.js 里面的代码

'use strict'module.exports={

NODE_ENV:'"prod"',

API_ROOT:'"http://pxh5.youlanw.com/server"' //后台正式接口地址

}

在package.json文件里修改命令行

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","test": "cross-env NODE_ENV=test env_config=test node build/build.js","build": "cross-env NODE_ENV=prod env_config=prod node build/build.js"},

npm run dev/start   运行本地环境

npm run test          测试环境打包

npm run build         正式环境打包

命令行里面  NODE_ENV ,env_config  后面的取值跟   config文件夹下面     对应子js文件里    变量 NODE_ENV 取值保持一致

2.2: 第二种方法

在config文件夹里面，新建一个 test.env.js(自定义名字)

'use strict'

const merge = require('webpack-merge')const devEnv = require('./dev.env')

module.exports=merge(devEnv, {

NODE_ENV:'"production"',

API_ROOT:'"http://bmh5.test.banmazgai.com/server"', //后台测试接口地址

ENV_CONFIG: '"test"' //这个是区分打包后环境的

})

修改prod.env.js 里面的代码

'use strict'module.exports={

NODE_ENV:'"production"',

API_ROOT:'"http://pxh5.youlanw.com/server"', //后台正式接口地址

ENV_CONFIG: '"prod"'}

在package.json文件里修改命令行

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","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"},

npm run dev/start   运行本地环境

npm run build:test    测试环境打包

npm run build:prod   正式环境打包

命令行里面  NODE_ENV = 后面的取值跟   config文件夹下面     对应子js文件里    变量 NODE_ENV 取值保持一致，即取值为  production ,  env_config 取值与 config/x.env.js 里面 变量 ENV_CONFIG取值相同

3: 修改build/build.js 下面得代码

有一段描述

const spinner = ora('building for prod....')

修改为

const spinner = ora('building for' + process.env.env_config)

4: build/webpack.prod.conf.js 文件

代码:

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

改为：

const env = require('../config/' + process.env.env_config + '.env')

5：封装axios  ,自己新建js文件

import axios from 'axios'

axios.defaults.baseURL = process.env.API_ROOT        // API_ROOT 变量来源于 config/test.env.js，config/prod.env.js    里面声明的变量 API_ROOT

axios.defaults.headers.common['Authorization'] = 'JSESSIONID=' + _sessionId