vue怎么使用 webpack.config.js 里配置的常量

可以在 Vue 的组件中使用 webpack 的 DefinePlugin 定义的常量，方法如下：

1. 在 webpack.config.js 中定义常量：

const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      ENV: JSON.stringify(env),
      VERSION: JSON.stringify(pkg.version)
    })
  ]
}

2. 在 Vue 组件中使用常量：

<template>
  <div>
    <p>{{ $constants.ENV }}</p>
    <p>{{ $constants.VERSION }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$constants.ENV);
    console.log(this.$constants.VERSION);
  }
}
</script>

注意：在 Vue 组件中，常量需要通过 `$constants` 访问。

相关问题

vue2 vue.config.js文件定义一个全局变量，并且使用

在Vue 2项目中，`vue.config.js` 文件是一个配置文件，它允许你在构建过程（如Webpack配置）中添加自定义设置。如果你想在 Vue 应用程序的全局范围内定义一个变量，通常这不是直接通过 `vue.config.js` 来完成的，因为这个文件主要用于处理构建相关的配置，而不是运行时环境变量。

然而，你可以将这样的全局变量放在`main.js`或者`src`目录下的`store.js`等专门用于状态管理的模块（例如Vuex store）里，或者使用`process.env.VUE_APP_NAME`这种环境变量的方式来进行声明，这样可以避免污染全局作用域。

如果你确实需要在`vue.config.js`中定义一个只对构建过程有用的临时变量，可以在`chainWebpack`钩子函数中通过`webpack.DefinePlugin`插件来设置，例如：

module.exports = {
  configureWebpack: (config) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        MY_GLOBAL_VARIABLE: JSON.stringify('your_value')
      })
    );
  }
};

这会将`MY_GLOBAL_VARIABLE`定义为一个全局常量，在编译后的代码中可用。

vue2 vue.config.js文件定义一个全局变量，并且在代码中使用呢。

Vue2 中，`vue.config.js` 文件是一个配置文件，用于自定义 Vue CLI 的构建过程。如果你想在项目中设置一个全局变量，你可以在这个文件中创建一个名为 `chainWebpack` 或者 `configureWebpack` 的函数，然后在该函数内部通过访问 `webpack-chain` 对象来修改配置。

例如，你可以这样做：

// 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` 功能主要用于设置常量，如果你需要动态生成值，可能需要在运行时其他地方设置，而不是直接在这里定义。