Vuejs2 Vue CLI/Webpack-将配置变量传递到前端

我开始使用Vue.js构建应用程序，并使用

Vue cli

使用

webpack

模板进行设置。在构建应用程序时，我需要向前端应用程序传递一些不同的值（主要是API端点和公共条带密钥）

无论出于何种原因，将它们添加到config文件夹的文件不会将值传递到前端，这可能是意料之中的，因为它们仅用于构建，而不会将值传递到前端。当I

console.log

process和

process.env

值时，它将

env

显示为空

我想做的是这样的事情：

import axios from 'axios';

export default axios.create({
  baseURL: process.env.API_URL
});

或

有没有一种方法可以让我根据环境为应用程序设置不同的配置变量？例如，如果我想在开发中本地点击

app.api

，在生产中点击

api.app.com

编辑 这是我的config/index.js文件，它只是提供的标准文件。（我已经删除了评论）

---

你的config/index.js文件是什么样子的？请查看编辑，它只是提供的标准index.js文件。你的

config/prod.env.js

和

config/dev.env.js

应该导出包含环境变量名称和值的对象。在你的例子中是这样吗？是和否，它正在导出对象，但它们没有传递到前端，似乎它们只用于构建过程。不确定你的意思。这些是可在Web包项目的任何部分访问的前端环境变量（假设您尚未对生成的模板进行任何重大配置更改）。您的

config/dev.env.js

看起来像这样吗？

export default Stripe(process.env.STRIPE_PUBLISHABLE_KEY)

var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    cssSourceMap: false
  }
}