Question

我需要从Laravel .env文件中提取Stripe密钥，并将其传递到Vue组件中。我在SO和Laravel docs上读到了一些类似的问题，提到只需添加MIX前缀就可以做到这一点，我可以在JS的任何地方调用process.env.MIX_STRIPE_KEY。

.env

STRIPE_KEY=pk_test_xxxxxxxxxxxxxxxxxx
STRIPE_SECRET=sk_test_xxxxxxxxxxxxxxxxxxx

MIX_STRIPE_KEY="${STRIPE_KEY}"
MIX_STRIPE_SECRET="${STRIPE_SECRET}"

在我的Vue组件中：

<template>
{{ stripe }} // Renders process.env.MIX_STRIPE_KEY (Not the actual key?)
...code
</template>
<script>
export default {
    data: function() {
        return {
            stripe: Stripe('process.env.MIX_STRIPE_KEY'),
...

完成此操作后，我npm run dev, production, watch进行了重新编译，尝试了所有方法...仍然没有让Stripe键显示在app.js文件中。

谈到app.js文件。我也尝试在其中添加它。

const app = new Vue({
    el: '#app',
 data:{
        stripeKey: 'process.env.MIX_STRIPE_KEY',
 },

然后尝试在Vue组件中调用{{ stripKey }}，但这也无法正确呈现。

任何帮助，将不胜感激。

Answer 1

您需要删除引号。 Webpack将为您插值：

<template>
{{ stripe }} // Renders process.env.MIX_STRIPE_KEY (Not the actual key?)
...code
</template>
<script>
export default {
    data: function() {
        return {
            stripe: Stripe(process.env.MIX_STRIPE_KEY),
...

将编译为：

<template>
{{ stripe }} // Renders process.env.MIX_STRIPE_KEY (Not the actual key?)
...code
</template>
<script>
export default {
    data: function() {
        return {
            stripe: Stripe("pk_test_xxxxxxxxxxxxxxxxxx"),
...

Answer 2

给以后的读者的注意：不要将您的STRIPE_SECRET放入Mix中，因为这可能会使它暴露给浏览器以及决定窥探它的任何用户。

如何将Laravel环境数据传递给Vue组件

2 个答案: