没有构建步骤的 Blade 模板中的 VueJS答案

【问题标题】：VueJS in Blade Template without Build Step没有构建步骤的 Blade 模板中的 VueJS
【发布时间】：2019-07-04 23:21:33
【问题描述】：

我正在尝试在我的一个页面刀片模板中实现 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 在具有禁止内容安全策略的环境中不安全评估。模板编译器无法在此环境中工作。考虑放宽政策以允许不安全评估或预编译将您的模板转换为渲染函数。

【问题讨论】：

服务器控制台中的任何错误
那里也没有错误。 @PatrickHollweck
你添加了vue框架吗？
@Jerodev vue.min.js 被添加到父 default.blade.php 中，是的。

标签： vue.js vuejs2 laravel-blade

【解决方案1】：

作为参考，问题是我的 CSP 不允许 unsafe-eval，这是在没有构建步骤的情况下需要的。直到我添加了vue.js 而不是缩小的vue.min.js，我才注意到这一点，它不会显示错误。

为了暂时解决此问题，我做了以下操作，但您可能不应该在生产环境中这样做：检查 CSP 的定义位置并将 'unsafe-eval' 添加到 "script-src"。

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

【讨论】：