vue-cli3+ts的webpack 測試,開發,部署環境配置

1>首先在package裏面的scripts加上vue

"test": "vue-cli-service build --mode test"

2>在根目錄上面建立3個配置文件,這裏有個重點vue-cli

VUE_APP_ 至關於一種全局變量的命名

.env文件對應的是開發模式,測試

NODE_ENV = 'development' VUE_APP_FLAG = '7889546' VUE_APP_URL = 'www.lili.com'

.env.production文件對應的是部署環境ui

NODE_ENV = 'production' VUE_APP_FLAG = 'production1' outputDir = dist

.env.test對應的是測試環境spa

NODE_ENV = 'production' VUE_APP_FLAG = 'test' outputDir = test

3>vue.config.js文件下code

configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 爲生產環境修改配置...
    } else if (process.env.NODE_ENV === 'development') { // 爲開發環境修改配置...
      process.env.BASE_URL = 'www.lilei.com'; } else if (process.env.NODE_ENV === 'test') { // 爲測試環境修改配置...
 } }

4>public/config/index.ts文件下blog

const peconfig = process.env; var tes1 = null; console.log(process.env); switch (process.env.NODE_ENV) { case 'development': tes1 = 'www.開發的.com'; break; case 'production': tes1 = 'www.部署的.com'; break; case 'test': tes1 = 'www.測試的.com'; break; } export default { peconfig, tes1 };

5>main.tsip

import test1 from '../public/config'; console.log('pub', test1);

6>結果開發

相關文章
相關標籤/搜索