Vue CLI/Webpack - 프런트엔드로 구성 변수 전달

Vue CLI/Webpack - 프런트엔드로 구성 변수 전달

Vue.js를 사용하여 앱을 빌드하기 시작했는데, 이를 사용하여 셋업하고 있습니다.vue-cli사용방법webpack템플릿입니다.앱을 빌드할 때 프런트 엔드 애플리케이션에 몇 가지 다른 값을 전달해야 합니다(주로 API 엔드포인트와 공용 Stripe 키).

어떤 이유로든 컨피규레이션폴더의 파일에 추가해도 프런트엔드에 값이 전달되지 않습니다.이것은 빌드에만 사용되고 프런트엔드에 값이 전달되지 않기 때문에 예상할 수 있습니다.내가 할 때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
  }
}

언급URL : https://stackoverflow.com/questions/45922853/vue-cli-webpack-passing-config-variables-to-the-frontend