vue-cli 根據不同的環境打包
阿新 • • 發佈:2018-04-28
web run ebp dev -c version index bsp export
根據項目需要,通過vue-cli中的npm run build 打包到不同的環境,例如測試環境,預發布環境,線上環境,根據process.env分別進行接口的調用
vue-cli 中build中build.js
require(‘./check-versions‘)() // process.env.NODE_ENV = ‘production‘ var ora = require(‘ora‘) var rm = require(‘rimraf‘) var path = require(‘path‘) var chalk = require(‘chalk‘) var webpack = require(‘webpack‘)var config = require(‘../config‘) var webpackConfig = require(‘./webpack.prod.conf‘) var spinner = ora(‘building for ‘ + process.env.NODE_ENV + ‘ of ‘ + process.env.env_config+ ‘ mode...‘ ) spinner.start() // var spinner = ora(‘building for production...‘) // spinner.start()
build中webpack.prod.conf.js
const env = config.build[process.env.env_config+‘Env‘]// const env = process.env.NODE_ENV === ‘testing‘ // ? require(‘../config/test.env‘) // : require(‘../config/prod.env‘)
config中的index.js
module.exports = { build: { prodEnv: require(‘./prod.env‘), // 線上環境 sitEnv: require(‘./sit.env‘), // 測試環境 ppeEnv: require(‘./ppe.env‘), // 預發布環境 ……
config中 dev.env.js
開發環境用的是測試接口,通過merge進行拷貝
var merge = require(‘webpack-merge‘) var sitEnv = require(‘./sit.env‘) module.exports = merge(sitEnv, { NODE_ENV: ‘"development"‘ })
在config中新建sit.env.js、ppe.env.js
module.exports = { NODE_ENV: ‘"sitEnvironment"‘, ENV_CONFIG: ‘"sit"‘, BASE_API: ‘"http://*****"‘ // 測試環境地址 }
module.exports = { NODE_ENV: ‘"ppeEnvironment"‘, ENV_CONFIG: ‘"ppe"‘, BASE_API: ‘"http://******"‘ // 預發布環境地址 }
安裝cross-env
npm install cross-env -D
package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", "build:ppe": "cross-env NODE_ENV=ppeEnvironment env_config=ppe node build/build.js", "build:sit": "cross-env NODE_ENV=sitEnvironment env_config=sit node build/build.js",
"lint": "eslint --ext .js,.vue src","test": "npm run lint" },
打包時候我們只需要
npm run build:sit // 測試環境 npm run build:ppe // 預發布環境 npm run build:prod // 線上環境
vue-cli 根據不同的環境打包