前言
由于每个环境都有一些不通信息，每次都替换修改挺麻烦的，所以使用不通的命令打包不通的环境编译包是一个不错的选择。
config/env.js 里面写每个环境的专有信息，通过命令区分不通环境，到该文件读取不通的配置信息，从而编译出不同环境的包
-
需要修改的文件列表
文件列表
根据打包命令编译出不通环境的包
- node执行命令添加模块
npm install vue-axios -save-dev
npm install --save axios vue-axios
npm install cross-env -save-dev
- 修改package.json
"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:dev": "cross-env NODE_ENV=development env_config=dev node build/build.js",
"build:test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
"build:pre": "cross-env NODE_ENV=pre env_config=pre node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
修改前后对比
- 修改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()
修改前后对比
- 修改build/webpack.prod.conf.js
// 注释并添加下面一行，切换环境
// const env = process.env.NODE_ENV === 'testing'
// ? require('../config/test.env')
// : require('../config/prod.env')
const env = config.build[process.env.env_config + 'Env']
修改前后对比
- 修改config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
ENV_CONFIG: '"dev"',
url_api: '""'
})
修改前后对比
- 修改配置文件config/index.js
build: {
// 根据环境部署
prodEnv: require('./prod.env'),
devEnv: require('./dev.env'),
preEnv: require('./pre.env'),
testEnv: require('./test.env'),
// Template for index.html
修改前后对比
- 添加预发布环境配置config/pre.env.js
'use strict'
module.exports = {
NODE_ENV: '"pre"',
ENV_CONFIG: '"pre"'
}
- 修改线上环境配置文件 config/prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prod"'
}
修改前后对比
- 修改配置文件 config/test.env.js
'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"',
ENV_CONFIG: '"test"'
})
- 添加配置文件config/env.js
import Vue from 'vue'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
/*
* 配置编译环境和线上环境之间的切换
* baseUrl: 域名地址
* routerMode: 路由模式
*/
let baseUrl = ''
let routerMode = 'history'
let DEBUG = false
let cancleHTTP = [] // 取消请求头设置；
// 注：下面的baseUrl地址为假地址，只是模拟的，无法调通。
// eslint-disable-next-line eqeqeq
if (process.env.NODE_ENV == 'development') {
Axios.defaults.baseURL = 'api'
DEBUG = true
// eslint-disable-next-line eqeqeq
} else if (process.env.NODE_ENV == 'production') {
Axios.defaults.baseURL = 'api'
// eslint-disable-next-line eqeqeq
} else if (process.env.NODE_ENV == 'testing') {
Axios.defaults.baseURL = 'api'
// eslint-disable-next-line eqeqeq
} else if (process.env.NODE_ENV == 'pre') {
Axios.defaults.baseURL = 'api'
}
export {
baseUrl,
routerMode,
DEBUG,
// eslint-disable-next-line no-undef
ROLE,
cancleHTTP
}
- 修改配置文件src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '../config/env'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
// Axios.defaults.baseURL = process.env.url_api
Axios.defaults.baseURL = 'api'
Vue.use(ElementUI)
console.log(process.env.NODE_ENV)
Vue.config.productionTip = false
// eslint-disable-next-line no-new
new Vue({
el: '#app',
router,
components: { App },
template: '
修改前后对比
根据环境部署
···
node run build:dev
node run build:test
node run build:pre
node run build:prod
···