フロントエンド・アーキテクチャの設定グローバル定数の削減

vue+webpack設定グローバル定数小妙用

envを作成します.js

vue呼び出し

js呼び出し

定数を設定する理由vue+webpackフロントエンドプロジェクトを開発する過程で、常にページロゴを変更したり、皮膚を交換したり、htmlタイトルの小さなアイコンを交換したり、共通インタフェース、バージョン番号を交換したりすることは避けられない.ではhtmlタイトルの小さなアイコン設定を例に挙げます.くだらないことは言わないで,直接コードをつけなさい.
envを作成します.js
メールでjs兄弟ディレクトリの下でenvを作成します.js

// env.js
module.exports = {
    BASE_URL: 'http://192.168.0.1:8080', //      
    version: '1.0.01', //     
    TIME_OUT: 5000, //     
	skin: 'red',//  
	icon: 'logoIconName',//logo  
}

vue呼び出し

//  main.js
import * as envs from '@/env' //  
//       ：        vue         
Vue.prototype.envs = envs; //       

アイコンと皮膚の呼び出し

// main.js
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  components: { App },
  template: '',
  mounted () {
    this.$nextTick(()=> {
        let arr = document.getElementsByTagName('body');
        arr[0].classList.add(this.envs.skin);
        var link = document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = './static/images/logoico/'+this.envs.logoName+'.ico';
        document.getElementsByTagName('head')[0].appendChild(link);
    });
    
  }
})

js呼び出し

// axios.js
import * as ENVS from '@/env'; //   
// axios    
let instance = axios.create({
    baseURL: ENVS.BASE_URL, //      base url
    timeout: ENVS.TIME_OUT, //       
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
});