vue-cli全局变量

最新推荐文章于 2025-04-29 21:39:52 发布

just_for_your_smile

最新推荐文章于 2025-04-29 21:39:52 发布

阅读量6.9k

点赞数 2

分类专栏： vue 前端

本文链接：https://blog.youkuaiyun.com/just_for_your_smile/article/details/78815783

版权

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍了如何在Vue CLI项目中定义全局变量，包括在`main.js`中直接设置或创建独立的`config.js`文件进行配置，并提供了在模板和JavaScript中调用全局变量的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.定义不变的vue全局变量

一般我们都会定义一些常量，比如基础的访问域名，静态资源版本号。

可以将该常量绑定到vue的全局属性上即可：

1.函数

Vue.prototype.baseUrl = function () {
      return 'http://youkuaiyun.com';
    };

2.变量
Vue.prototype.getTitle = {
      title:'',
      isBack: true,
      isAdd:  false,
    };

添加方法（在vue-cli中使用）：

1直接将上面任一个改代码放入 ''src/main.js" 中，即可定义全部变量。

2类似这种配置，可以单独起一个配置文件，

（1）可以在项目的src 目录里面新建一个 lib目录。lib目录里创建一个 config目录，然后在config目录里新建一个config.js文件.

（2）然后在config.js文件里写上

export default {
  install(Vue,options)
  {
    Vue.prototype.baseUrl = function () {
       return '111';
    };
    Vue.prototype.getTitle = {
      title:'',
      isBack: true,
      isAdd:  false,
    };
    Vue.prototype.showFootTab = {
      isShow:false,
      active:0,
    }
  }
}

（3）最后还要在vue-cli里面引用

在根目录下的 main.js中添加下面两行代码即可

        import config from './lib/config/config.js'

        Vue.use(config);

以上就可以定义全局变量了。

2使用方法

（1）直接在模版中调用

<template>
  <div>
    {{getTitle.title}}
  </div>
</template>

（2）js代码中使用

this.getTitle