クロスENVクロスプラットフォーム環境変数の設定のVUE開発

クロスENVクロスプラットフォーム環境変数の設定のVUE開発

内部の異なる環境で異なるデータを表示するために、使用環境変数にVUE開発。
クロスenvが簡単に私たちが解決することができ
、これについてクロスENV

まず、クロスENVをインストール

npm install cross-env --save-dev

使用
package.json内の構成環境変数名

// config/proxyDev.js 代理地址一
const proxyDev = {
  '/api': {
    target: 'http://xxxxxxxxxxxx', // 代理的接口地址
    secure: false // 是否验证SSL 
  }
};
module.exports = proxyDev;

// config/proxyTestCenter.js 代理地址二
const proxyTestCenter= {
  '/api': {
    target: 'http://xxxxxxxxxxxxx', // 代理的接口地址
    secure: false // 是否验证SSL 
  }
};
module.exports = proxyTestCenter;

// config/index.js 新增下面代码
const proxyDev= require('./proxyDev'); // 新建文件
const proxyTestCenter= require('./proxyTestCenter'); // 新建文件

let proxyPath;
switch (process.env.proxyPath) { // 根据命令来切换环境变量
  case 'dev': proxyPath = proxyDev; break;
  case 'tc': proxyPath = proxyTestCenter; break;
}

変更のconfig / index.jsファイル

// 修改config/index.js 文件

module.exports = {
	dev: {
		...
		proxyTable: proxyPath, // 将 proxyTable得知替换为上面定义的proxyPath 以便使用命令更换环境变量
		...
	}
		
	...
}	

コンフィギュレーションコマンドpackage.json package.json次のコードに変更：

// package.json 中修改scripts 的dev和rc; 配置方式模板 cross-env key=value 注：这里的key是proxyTable value是dev和tc; 
   ...
   "scripts": {
    	"dev": "cross-env proxyTable=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    	"tc": "cross-env proxyTable=tc webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
		...
  	},
  	...

最後に、あなたは別のコンパイラコマンドを使用するように環境変数を変更することができますので、

npm run dev  //执行的是 dev环境变量

npm run tc  //执行的是 tc环境变量

参考ボーエン/文書：[^ 1]
[HTTPプロキシ・ミドルウェアエージェント]：https://www.npmjs.com/package/http-proxy-middleware
[クロスプラットフォーム環境変数を設定クロスENV]：HTTPSを：// www.npmjs.com/package/cross-env