Environment
有时候开发环境和生产正式环境的配置复杂，每次build都需要更改一些全局的配置项
"node": ">= 6.0.0",
"npm": ">= 3.0.0",
"vue": "^2.5.2",
"vue-clipboard2": "^0.3.1",
"vue-router": "^3.0.1",
Config
Dev -- > ./config/dev.env.js
dev的配置比较简单明了
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
// 下面这两个自己定义
API: '"http://localhost:8000"',
KEY:'"XXXX"'
})
Prod --> ./config/prod.env.js
生产环境的需要一级一级去找，去确认，配置文件详细解释建议参考 ：https://www.cnblogs.com/ye-hcj/p/7096341.html
- package.json
找到scripts模块
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
-
./build/build.js
// 生产模式的webpack配置文件 const webpackConfig = require('./webpack.prod.conf') -
./build/webpack.prod.conf
const env = require('../config/prod.env')生产环境配置
'use strict'
module.exports = {
NODE_ENV: '"production"',
// 下面这两个自己定义
API: '"https://XXX-api.XXX.com"',
KEY:'"XXXX"'
}
Demo
如何调用
console.log('XXX'+process.env.KEY)
In addition
可以在package.json 中配置N个环境，不仅限于Dev和Prod了，可以加上版本之类的管理，比如
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"dev_v1": "webpack-dev-server --inline --progress --config build/webpack.dev_v1.conf.js",
"prod_v1": "webpack-dev-server --inline --progress --config build/webpack.prod_v1.conf.js",
},
效果
⚡ npm run dev_v1
> XXX@1.0.0 dev_v1 XXX
> webpack-dev-server --inline --progress --config build/webpack.dev_v1.conf.js
95% emitting
DONE Compiled successfully in 9485ms 00:35:26
I Your application is running here: http://localhost:8080