根据项目需要, 通过 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 // 线上环境
来源: http://www.bubuko.com/infodetail-2578153.html