无需构建步骤的刀片模板中的VueJS

Question

我正在尝试在我的页面刀片模板之一中实现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!'
  }
})

有了这个，我只能得到一个空白页。控制台中没有错误，所有文件均已加载。

检查员明白我的意思

我不想执行构建步骤或任何其他操作，仅希望通过vue进行最小设置。有什么想法我在这里想念的吗？

-更新： 我用开发版本替换了vue.min.js，最后有了一个提示：

  

vue.js：633 [Vue警告]：看来您正在使用的独立版本   内容安全政策禁止的环境中的Vue.js   不安全的评价。模板编译器无法在此环境中工作。   考虑放宽政策以允许进行不安全评估或预编译   您的模板放入渲染功能。

Answer 1

作为参考，问题是我的CSP不允许使用unsafe-eval，在这种情况下，没有构建步骤就必须这样做。直到我加入vue.js而不是缩小的vue.min.js才显示出错误。

现在要解决此问题，尽管您可能不应该在生产环境中进行此操作，但我还是执行了以下操作：检查CSP的定义位置，并将'unsafe-eval'添加到"script-src"

在生产中，您可能想在脚本上使用nonce而不是unsafe-eval，而要使用https://github.com/spatie/laravel-csp之类的东西来生成nonce。