前端架构之设置全局常量小妙用

最新推荐文章于 2023-11-29 22:46:51 发布

someRian

最新推荐文章于 2023-11-29 22:46:51 发布

阅读量1.6k

点赞数

分类专栏： vue-cli node vue

本文链接：https://blog.csdn.net/maichaoqun/article/details/104782307

版权

vue 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

node

6 篇文章 0 订阅

订阅专栏

vue-cli

5 篇文章 0 订阅

订阅专栏

vue+webpack设置全局常量小妙用

创建env.js
vue调用
js调用

为什么要设置常量？在开发vue+webpack前端项目过程中，难免会经常更页面logo，更换皮肤、更换html标题小图标、公共接口、版本号等等，总不能每次修改都要重新定位所在页面，定位在哪一行代码里修改，这个对后期的更新维护成本太高了，因此针对以上问题，就需要设置常量，那么我们就以html标题小图标设置为例。
废话少说，直接上代码

创建env.js

在main.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: '<App/>',
  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'
    }
});