Vue项目中 设置全局变量

Vue项目中 设置全局变量

• 避免每个单页面都要引入一些复用组件和方法

1. 我们从 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获取实例对象