webpack vue 全局变量

在Vue项目中，我们可能会需要在多个组件中使用相同的变量，这时我们可以将这些变量作为全局变量来使用。本文将介绍如何使用webpack给Vue项目添加全局变量。

步骤

第一步：创建全局变量文件

在Vue项目的根目录下，创建一个globals.js文件，并定义我们需要使用的全局变量。例如：

// globals.js
export const BASE_URL = 'http://localhost:3000/api';
export const TOKEN = 'my_token';

第二步：在webpack中配置全局变量

打开项目中的webpack配置文件，一般命名为webpack.config.js。在文件中添加以下代码：

// webpack.config.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
  // ...其他配置
  plugins: [
    // 定义全局变量
    new webpack.DefinePlugin({
      BASE_URL: JSON.stringify(require('./globals').BASE_URL),
      TOKEN: JSON.stringify(require('./globals').TOKEN),
    })
  ]
}

这里我们使用webpack的DefinePlugin插件来定义全局变量。其中，我们通过require将定义好的全局变量文件中的内容读取出来，并使用JSON.stringify进行转换。

第三步：在Vue组件中使用全局变量

通过以上配置，全局变量已经可以在Vue组件中使用了。例如：

<template>
  <div>
    <p>BASE_URL: {{ BASE_URL }}</p>
    <p>TOKEN: {{ TOKEN }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      BASE_URL: BASE_URL,
      TOKEN: TOKEN,
    }
  }
}
</script>

注意，这里我们需要将定义好的全局变量赋值给组件的data选项，方可在模板中使用。另外，全局变量名需要使用大写字母，以示区别。

总结

通过以上步骤，我们就可以在Vue项目中使用全局变量了。全局变量的定义和配置相对简单，使用方便，可以大大提高项目的可维护性和可扩展性。