项目开发流程一般流程可能有开发和生产,但是也会有测试和预发,这样四个环境下。npn run dev 或者
npm run build 时就需要对应不同环境。
如此增加一个环境参数env_config 分别在dev.env.js 和prod.env.js
var merge = require('webpack-merge');
var prodEnv = require('./prod.env');
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
env_config: '"' +process.env.env_config+ '"'
});
module.exports = {
NODE_ENV: '"production"',
env_config: '"' +process.env.env_config+ '"'
};
对应npm 命令
"dev:dev": "cross-env env_config=dev node build/dev-server.js",
"dev:pro": "cross-env env_config=pro node build/dev-server.js",
"dev:pre": "cross-env env_config=pre node build/dev-server.js",
"dev:test": "cross-env env_config=test node build/dev-server.js",
"build:dev": "cross-env env_config=dev node build/build.js",
"build:pro": "cross-env env_config=pro node build/build.js",
"build:pre": "cross-env env_config=pre node build/build.js",
"build:test": "cross-env env_config=test node build/build.js"
当然 npm -i cross-env --dev-save
就可以实现诸如不同环境的域名
domainconfig.js
module.exports = {
domain: function() {
let environment = process.env.env_config;
if (environment == 'test') {
return 'https://www.test.com'
} else if (environment == 'pre') {
return 'https://www.pre.com'
} else if (environment == 'pro') {
return 'https://www.pro.com'
} else if (environment== 'dev') {
return 'https://www.dev.com'
}
}
}
代理配置等
var path = require('path');
var domain = require('../domainconfig/index');
module.exports = {
dev: {
env: require('./dev.env'),
port: 3333,
https:true,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
host: '127.0.0.1',
proxyTable: {
'/api': {
target: domain.domain(),
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/api',
}
},
},
cssSourceMap: true
},
externalsCss_dev:[
],
externalsCss_prod: [
],
externalsJs_dev:[
],
externalsJs_prod: [
],
title: '' //模板标题
};
如此执行 npm run dev:pre