如何修复“未捕获的 ReferenceError:Vue 未在 vuetemplatetest.2.html:19 中定义”

Posted

技术标签:

【中文标题】如何修复“未捕获的 ReferenceError:Vue 未在 vuetemplatetest.2.html:19 中定义”【英文标题】:How to fix "Uncaught ReferenceError: Vue is not defined at vuetemplatetest.2.html:19" 【发布时间】:2019-08-20 16:19:50 【问题描述】:

我尝试使用 bootstrap-vue 设置 laravel。

npm list --depth 0
/home/<thatsme>/LARAPP/laravel
├── axios@0.18.0
├── bootstrap@4.3.1
├── bootstrap-vue@2.0.0-rc.16
├── cross-env@5.2.0
├── jquery@3.3.1
├── laravel-mix@4.0.15
├── lodash@4.17.11
├── popper.js@1.14.7
├── resolve-url-loader@2.3.2
├── sass@1.17.3
├── sass-loader@7.1.0
├── vue@2.6.10
├── vue-router@3.0.2
└── vue-template-compiler@2.6.10

给我看,没关系。目的是在没有在线链接的情况下工作。 当我尝试使用简单的 html 进行测试时,我得到了主题主题中描述的错误:

<!DOCTYPE html>
<html lang="de">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <title>eijo</title>
  </head>
  <body>

<div id='app'>  
  <b-table striped hover :items="items" :fields="fields"> </b-table>
</div>


<script>
window.app = new Vue(
        el: '#app',
  data:     fields: ['first_name', 'last_name', 'age'], 
             items: [
         isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' ,
         isActive: false, age: 21, first_name: 'Walter', last_name: 'Shaw' ,
         isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' ,
         isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' 
      ]
  
  

编辑:在 mit app.js 中是这样的:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

【问题讨论】:

【参考方案1】:

在您的脚本顶部添加&lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;

【讨论】:

就像我在这里写的:“目的是在没有在线链接的情况下工作”。我想,有可能在没有它的情况下部署应用程序吗?根据你的建议,它有效。我知道,但很抱歉。也许不是一个好问题。 是的,但不知何故你必须提供 vue 模块。我使用 Vue CLI,它安装了一个可以完成所有工作的服务器。稍后我可以构建我的应用程序并将其放入我想要为应用程序提供服务的服务器中。例如我在后面使用环回。 vue-cli 是如何工作的?你能解释一下吗?我在 node.js 和 npm 和 laravel/vue/bootstrap 的世界里绝对是新手 在你的命令提示符下输入“npm install -g @vue/cli”。这将安装 vue-cli。稍后键入“vue ui”,这将在浏览器中打开一个 GUI,您可以在其中创建和管理您的项目。这是网页cli.vuejs.org/guide/installation.html youtube 和网站上有很多教程和信息。很容易上手。 感谢爱德华多【参考方案2】:

[编辑:] 保存问题:

div id="app" class="container"

我的 layout.blade.php 中缺少的内容

【讨论】:

以上是关于如何修复“未捕获的 ReferenceError:Vue 未在 vuetemplatetest.2.html:19 中定义”的主要内容,如果未能解决你的问题,请参考以下文章

未捕获的 ReferenceError:未定义 jQuery

未捕获的 ReferenceError:$ 未定义 [重复]

未捕获的 ReferenceError:未定义数据

“未捕获的 ReferenceError:未定义 firebase”。如何在 Chrome 中定义 firebase 并超越黑屏?

如何解决此错误:未捕获的ReferenceError:未定义jQuery

未捕获的 ReferenceError:RegeneratorRuntime 未在 React 中定义