VueJS в шаблоне Blade без шага сборки - PullRequest
Новая
       8

VueJS в шаблоне Blade без шага сборки

0 голосов
/ 11 февраля 2019

Я пытаюсь реализовать VueJS в одном из шаблонов блэйд-страниц моей страницы.Я просто хочу использовать Vue в этом единственном шаблоне.

Я попробовал следующее:

default.blade.php 

//...
@yield('js-for-layout-before')
    <script src="{{ asset('js/vue.min.js') }}"></script>
// ...

view.blade.php 

@extends('layouts.default')
//...
@section('content')
    <div id="app">
    <ol>
        <todo-item></todo-item>
    </ol>
    <p>@{{ message }}</p>
    </div>
    <script type="module" src="{{ asset('js/pages/vue_component.js') }}"></script>
@stop

vue_component.js 

Vue.component('todo-item', {
  template: '<li>This is a list item</li>'
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

При этом я получаю только пустую страницу.В консоли нет ошибок, все файлы загружены.

Инспектор показывает, что я имею в виду:

enter image description here

У меня нетхотите реализовать шаг сборки или что-нибудь, просто минимальную настройку с помощью vue.Есть идеи, что мне здесь не хватает?

- ОБНОВЛЕНИЕ: я заменил vue.min.js на версию для разработки и наконец получил подсказку:

vue.js: 633 [Предупреждение Vue]. Похоже, вы используете автономную сборку Vue.js в среде с политикой безопасности контента, которая запрещает unsafe-eval.Компилятор шаблонов не может работать в этой среде.Рассмотрите возможность смягчения политики, чтобы позволить unsafe-eval или предварительно скомпилировать ваши шаблоны в функции рендеринга.

1 Ответ

0 голосов
/ 13 февраля 2019

Для справки, проблема заключалась в том, что мой CSP не учитывал unsafe-eval, что требуется в этом сценарии без шага сборки.Я не заметил этого, пока не включил vue.js вместо минимизированного vue.min.js, который не показывает ошибок.

Чтобы исправить это сейчас, я сделал следующее, хотя вам следуетвероятно, не делать этого в рабочей среде : проверьте, где определен ваш CSP, и добавьте 'unsafe-eval' к "script-src".

В рабочей среде вы, вероятно, захотите использовать nonce в сценарии вместо unsafe-eval и что-то вроде https://github.com/spatie/laravel-csp для генерации nonce.

...