Как передать данные Laravel env в компонент Vue

Question

Мне нужно извлечь ключи Stripe из моего файла Laravel .env и передать его в компонент Vue.Я прочитал несколько похожих вопросов по SO и Laravel docs , в которых упоминается об этом путем простого добавления префикса MIX, и я могу позвонить process.env.MIX_STRIPE_KEY в любом месте моего JS.

.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',
 },

Затем попытался вызвать {{ stripKey }} в компоненте Vue, но это тоже не правильно рендерилось.

Любая помощь по этому вопросу будетоценили.

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"),
...