Vue项目中 设置全局变量
Vue项目中 设置全局变量避免每个单页面都要引入一些复用组件和方法我们从 vue-cli 文档中 找到这样一句2.又在webpack中找到 ProvidePlugin我们就在 自己项目的vue.config.js 中,书写配置const path = require('path');module.exports = {//其他的配置// 配置webpack相关configureWebpack :
·
Vue项目中 设置全局变量
- 避免每个单页面都要引入一些复用组件和方法
- 我们从
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
- 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
获取实例对象
更多推荐
已为社区贡献7条内容
所有评论(0)