vue配置全局变量,vue全局配置文件
vue项目中有一些方法需要在多个页面上调用，但是为了避免在每个页面上导入这些方法，可以将这些方法添加到原型中，这样就可以在每个组件中使用这些方法。下面文章主要介绍两种配置vue全局方法的方法，供大家参考。
目录
1、前言2、第一路3、第二路总结。
1，前言
在Vue项目的开发中，肯定会出现这样的场景：在不同的组件页面中使用相同的方法，比如格式化时间、下载文件、深度复制对象、返回数据类型、复制文本等等。这时候就需要把常用功能分离出来，提供给全局使用。如何定义一个在全局环境下都能使用的工具函数类？请看下面的分类。
PS:本文中的vue是2.6.12。
2，第一种方式
直接添加到Vue实例原型中。
首先打开main.js，导入定义好的通用方法utils.js文件，然后使用Vue.prototype.$utils=utils将其添加到Vue实例中。
从“vue”导入Vue
从导入应用程序。/App.vue
从导入路由器。/路由器
从导入存储。/商店
从导入实用程序。/utils/Utils
Vue.prototype.$utils=utils
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount(“# app”)
之后在组件页面，如果需要使用，就是这个。$utils.xxx
方法：{
fn() {
让时间=这个。$utils.formatTime(新日期())
}
}
缺点：
绑定太多东西会让vue实例太大。
每次用的时候加这个。
优势：
简单定义
官方文件
3，第二种方式
使用webpack进行全局导入。提供插件
首先在vue.config中引入webpack和path，然后在module.exports的configureWebpack对象中定义插件，引入需要的js文件。
的完整vue.config.js配置如下：
const BASE URL=process . env . vue _ APP _ BASE _ URL
const webpack=require(webpack )
const path=require(path )
模块.导出={
公共路径：“”。/,
output dir:process . env . vue _ APP _ BASE _ output dir
资产目录：资产，
lintOnSave:没错，
productionSourceMap: false，
configureWebpack: {
devServer: {
开：假，
覆盖：{
警告：真的，
错误：真，
},
主机：“本地主机”，
端口：“9000”，
假的，
代理服务器：{
/api: {
目标：baseURL，
安全：假，
ChangeOrigin: true，//打开代理
路径重写：{
^/api: /，
},
},
}
},
插件：[
新网络包。提供插件({
Util: [path.resolve (_ _ dirname，。/src/utils/utils.js )、 default]、//定义的全局函数类
Toast: [path.resolve (_ _ dirname，。/src/utils/toast.js )、 default]、//定义的全局toast项目符号方法
正在加载：[path.resolve (_ _ dirname，。/src/utils/loading.js )， default ]//定义的全局加载方法
})
]
}
}
在这个定义之后，如果你的项目中有ESlint，还需要在根目录下的eslintrc.js文件中添加一个globals对象，并启用定义的全局函数类的属性名，否则会报错找不到该属性。
模块.导出={
根：没错，
语法分析选项：{
解析器：“巴别塔-埃斯林”，
源类型：“模块”
},
环境：{
浏览器：没错，
节点：真，
es6:是的，
},
全局:{
UTILS: true，
吐司:没错，
正在加载:对
}
//.省略n线ESlint的配置。
}
定义后，重新启动项目并按如下方式使用它：
计算值：{
播放计数(){
return(数字)={
//UTILS是已定义的全局函数类。
const count=utils . tran number(num，0)
返回计数
}
}
}
缺点：
还没找到.
优势：
团队发展很酷
官方文件
总结
以上就是本文关于配置vue全局方法的两种方式。有关配置vue全局方法的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。