Question

我开始使用Vue.js构建应用，并使用vue-cli模板使用webpack进行设置。构建应用程序时，我需要将一些不同的值传递给前端应用程序（主要是API端点和公共条带键）

无论出于何种原因，将它们添加到配置文件夹的文件中并不会将值传递给前端，这可能是预期的，因为它们仅用于构建，没有将值传递给前端。当我console.log process和process.env时，它会将env显示为空。

我希望能做的是这样的事情：

import axios from 'axios';

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

或

export default Stripe(process.env.STRIPE_PUBLISHABLE_KEY)

有没有办法让我根据环境为应用程序设置不同的配置变量？例如，如果我想在开发中本地点击app.api，在生产中点击api.app.com？

修改

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

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
  }
}

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

修改

0 个答案: