时间戳

首页 > 解决方案 > 组件加载导致“尚未为上下文加载模块名称”

javascript - 组件加载导致“尚未为上下文加载模块名称”

问题描述

我正在尝试了解有关 Vue.js 的更多信息，但我正在与一个问题作斗争。我正在尝试使用 .vue 文件，以便可以在此文件中包含我的模板代码。我的 html 代码如下所示。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <script src="vue.js"></script>
    <script src="require.js"></script>
  </head>
  <body>
    <div id="app">
      <navbar-component></navbar-component>
    </div>
    <script src="./main.js"></script>

  </body>
</html>

我的工作 JavaScript / Vue.js 代码看起来像这样。

Vue.component('navbar-component', {
  template: '<h3>Title</h3>'
});

const demo = new Vue({
  el: '#app',
  mounted() {
    console.log('mounted');
  }
});

问题是当我将其更改为使用此 JavaScript 时。当我尝试从我的 test.vue 文件加载时，它不再工作并且我收到此错误。

require.js:168 Uncaught Error: Module name "src/components/test.vue" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded
    at makeError (require.js:168)
    at Object.localRequire [as require] (require.js:1436)
    at requirejs (require.js:1797)
    at main.js:1

我的最终测试代码如下所示：

main.js

Vue.component('navbar-component', require('./src/components/test.vue'));

const demo = new Vue({
  el: '#app',
  mounted() {
    console.log('mounted');
  }
});

src/components/test.vue

<template>
  <div class="helloworld">
      <h1>Hello world</h1>
  </div>
</template>

<script>
</script>

标签： javascriptvue.jsrequirejs

解决方案

推荐阅读