vue2 vue.config.js文件定义一个全局变量,并且在代码中使用呢。
时间: 2024-11-06 22:20:24 浏览: 17
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
5星 · 资源好评率100%
Vue2 中,`vue.config.js` 文件是一个配置文件,用于自定义 Vue CLI 的构建过程。如果你想在项目中设置一个全局变量,你可以在这个文件中创建一个名为 `chainWebpack` 或者 `configureWebpack` 的函数,然后在该函数内部通过访问 `webpack-chain` 对象来修改配置。
例如,你可以这样做:
```js
// vue.config.js
module.exports = {
configureWebpack: (config) => {
config.plugins.push(new webpack.DefinePlugin({
// 定义一个全局变量
GLOBAL_VARIABLE: JSON.stringify('这是我的全局变量'),
}));
},
};
```
在这个例子中,`GLOBAL_VARIABLE` 现在已经成为了一个 JavaScript 运行环境中的全局变量,其值会被字符串 '这是我的全局变量' 替换。在你的 Vue 组件中,可以直接通过 `process.env.GLOBAL_VARIABLE` 来获取这个变量,因为`DefinePlugin`会将它插入到 `process.env` 对象中。
注意,`define` 功能主要用于设置常量,如果你需要动态生成值,可能需要在运行时其他地方设置,而不是直接在这里定义。
阅读全文