将 Stripe JS 集成到 Laravel 6.0：[Vue 警告]：编译模板时出错：

Question

我在我的 checkout.blade.php 文件中集成了 Stripe.js。它可以工作，但并非没有此错误：

[Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed

我已使错误消失，但条纹元素不会出现在页面上。我还在此文件中集成了其他 JS 用于我的表单验证，它工作正常且不返回错误。

这是返回错误的 Stripe 代码：

<script>
        (function(){
        // Create a Stripe client.
        var stripe = Stripe('pk_test_9dn1vt3i0j0Q5GZdwAXn9iUs00iMziQDyD');

        // Create an instance of Elements.
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
            color: '#aab7c4'
            }
        },
        invalid: {
            color: 'red',
            iconColor: 'red'
        }
        };

        // Create an instance of the card Element.
        var card = elements.create('card', { style: style, hidePostalCode: true });

        // Add an instance of the card Element into the `card-element` <div>.
        card.mount('#card-element');

        // Handle real-time validation errors from the card Element.
        card.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
        });

        // Handle form submission.
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
        event.preventDefault();

        stripe.createToken(card).then(function(result) {
            if (result.error) {
            // Inform the user if there was an error.
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
            } else {
            // Send the token to your server.
            stripeTokenHandler(result.token);
            }
        });
        });

        // Submit the form with the token ID.
        function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
        }
        })();
    </script>

请注意，现在 Stripe 代码嵌套在我的：

@section('content')

@endsection

由我的父模板 '''app.blade.php''' 扩展。

如果我将它粘贴到父模板之外并用这样的东西包装它：

@section('stripe')

@endsection

然后没有错误返回，但元素不会出现，因为我的 JS 不知道在哪里安装我的 Stripe 元素。当然，我的父模板中也有这个：@yield('stripe')

如何在不出现此模板错误的情况下显示我的 Stripe 元素？

编辑：我使用了 Laravel/ui 脚手架（Bootstrap 版本）。附件如下：

app.js：

require('./bootstrap');

window.Vue = require('vue');

const app = new Vue({
    el: '#app',
});

ExampleComponent.vue：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

谢谢

Answer 1

正如您在问题中提到的，您正在使用来自laravel/ui 的引导脚手架。根据您用于生成该脚手架的命令，它可以将一些以 VueJS 为中心的文件或数据安装到公共文件中，这似乎发生在您身上。虽然您自己对 VueJS 什么都没做，但脚手架为您做了。

在您的 app.js 文件中，如果您删除或注释掉第 3-7 行，然后重新运行 laravel-mix：

require('./bootstrap');

// 3 window.Vue = require('vue');
// 4
// 5 const app = new Vue({
// 6    el: '#app',
// 7 });

你会解决你的问题。

如第 6 行所示，VueJS 以app.stub 中存在的app id'd 元素为目标，该文件通常放在resources/views/layouts/app.blade.php 下；此视图用作扩展其他视图的基础视图。鉴于app id'd div 封装了大部分页面/正文元素，因此您放入其中的任何内容 VueJS 都将解释为其基本模板的一部分。这就是为什么您的错误警告不要“将脚本标签放入模板”的原因。

如前所述，对app.js 文件的上述更改当然可以解决问题，因为它使 VueJS 脱离了等式。但是，如果您根本不打算使用 VueJS，您也可以将其从您的 package.json 文件中删除并运行 npm prune 以删除未使用的包（如在 package.json 中未指定的任何包中，而不是需要作为另一个包的依赖项），从您的站点中完全删除该库。