Vue项目中 设置全局变量

  • 避免每个单页面都要引入一些复用组件和方法
  1. 我们从 vue-cli 文档中 找到这样一句
    vue-cli
    2.又在webpack中找到 ProvidePlugin
    在这里插入图片描述
    我们就在 自己项目的 vue.config.js 中,书写配置
const path = require('path');
// 引入webpack
const  webpack = require('webpack');
module.exports = {
	//其他的配置 
	// 配置webpack相关
	configureWebpack : config => {
	// 定义全局变量
    config.plugins.push(new webpack.ProvidePlugin({
      Moment: 'moment', // 你要引入的 第三方库 
      Utils: path.resolve(__dirname, "./src/utils.js") // 组件 / 通用方法  (注意路径修改)
    }))
	}
}

重启项目,就可以在全局使用你配置好的全局变量了,不用再每个单页面引入引入。。。

附上:上文中文档连接

  • vue -cli 文档中 使用webpack

https://cli.vuejs.org/zh/guide/webpack.html

  • webpack 中配置全局变量

https://www.webpackjs.com/plugins/provide-plugin/#%E4%BD%BF%E7%94%A8-vue-js

  • 在vue2版本中可以通过 Vue.prototype.xxx的方式设置一些全局参数。
  • 在vue3版本中更改为app.config.globalProperties,使用时要先通过getCurrentInstance获取实例对象
Logo

前往低代码交流专区

更多推荐