javascript - 将 env 变量暴露给 VueJs、WebPack 中的其他 js 文件

Question

我正在尝试将环境变量公开给我的其他 js 文件。所以我有其他 JS 文件，我对其进行了结构化，以便 api 和模型存在于它自己的文件和文件夹中，当我想使用它们时，我将使用导入它

import Auth from '@services/api/auth'

在那个文件中，我想公开环境变量，比如我如何在 vue 组件脚本文件中做到这一点，比如

<script>
import login from '@/components/view/login/login'

export default {
    components: {
        login
    },
    created () {
        console.log(process.env.API_BASE_URL)
    }
}
</script>

所以我使用标准的 Vue 2.5 和 webpack 3.1，目前我可以process.env.API_BASE_UR在文件中调用 L，.vue但是如果我尝试在导入的.js文件中调用它，我会得到 undefine。

像这样

import Axios from 'axios'

export default {
    login (username, password) {
        return new Promise((resolve, reject) => {
            console.log(process.ENV.API_BASE_URL)
            let url = process.ENV.API_BASE_URL + 'oauth2/token'
            let body = {
                username: username,
                password: password,
                scope: process.ENV.API_SCOPE.LOGIN.scope,
                grant_type: process.ENV.API_SCOPE.LOGIN.grant_type
            }
            let header = {
                auth: {
                    username: process.ENV.API_CLIENT.LOGIN.username,
                    password: process.ENV.API_CLIENT.LOGIN.password
                }
            }
            return Axios.post(url, body, header)
                .then(res => {
                    resolve(res)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
}

标签： javascriptvue.jswebpackvuejs2development-environment