估计上线的时候, 大家都遇到过这个烦恼, 测试线和生产线的 API 基础域名不同, 如果手动改起来实在麻烦, 其实 webpack 中内置了多环境域名自定义打包的功能;
第一步
NPM install cross-env -g
第二步
- "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:test": "cross-env NODE_ENV=production BUILD_ENV=test node build/build.js",
- "build:prod": "cross-env NODE_ENV=production BUILD_ENV=prod node build/build.js"
- },
在 package.JSON 里配置 build:test build:prod,
第三步
修改 config 目录下的 prod.env.JS
- 'use strict'
- const BUILD_ENV = process.env.BUILD_ENV
- let baseUrl
- switch (BUILD_ENV) {
- case 'test':
- baseUrl = 'http://api.test.com'
- // 测试
- break;
- case 'prod':
- baseUrl = 'http://api.prod.com'
- // 生产
- break;
- }
- module.exports = {
- NODE_ENV: '"production"',
- BUILD_ENV: '"'+ BUILD_ENV +'"',
- baseUrl: '"'+ baseUrl +'"',
- }
改后, 可以在项目里通过 process.env 拿到暴露出去的 API 基础域名, 其实这里已经可以用 NPM run build:test(使用测试线域名打包),NPM run build:prod(使用生产线域名打包), 但这里还需要一个开发环境基础 API:
第四步
更改 config 目录下的 dev.env.JS
更改如下:
- 'use strict'
- const merge = require('webpack-merge')
- const prodEnv = require('./prod.env')
- module.exports = merge(prodEnv, {
- NODE_ENV: '"development"',
- baseUrl: '"http://127.0.0.1"'
- })
相当于增加了一个开发环境基础域名
第五步
在基础域名变量取值的时候做一个判断
const BASE_URL = process.env.baseUrl || process.dev.baseUrl
笔者的项目基础域名取值是在 src/API/url.JS 下
success
使用方法如下
NPM run build:test ========> 测试环境下打包
NPM run build:prod ========> 生产环境下打包
NPM run dev ========> 开发环境下开发
来源: http://www.jianshu.com/p/9d490b93489d