时间戳

首页 > 解决方案 > 使用Vue CLI3.0创建多页面应用程序，如何处理这个错误？

vue.js - 使用Vue CLI3.0创建多页面应用程序，如何处理这个错误？

问题描述

我是 Vue 的初学者，我正在尝试使用 Vue 构建一个多页 Web 应用程序以进行练习。但是我在下面遇到了这个问题：

Failed to compile.

./src/index/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/index/views/Home.vue?vue&type=script&lang=js&)

Module not found: Error: Can't resolve '@/components/HelloWorld.vue' in '/home/Username/Web/wk_front_end/src/index/views'

这是我项目的文件树，每个文件都是vue生成的，因为我只想测试多页，所以我认为不会是编码问题。

WebStorm 截图

这是我所做的：

index我在该文件夹下创建了一个名为 的src文件夹，然后我将原来的所有文件和文件夹移动src到，index因为我希望components和assets只在相应的页面中使用。

我vue.config.js的是：

module.exports = {
  pages: {
    index: {
      entry: "src/index/main.js",
      template: "src/index/index.html",
      filename: "index.html",
      title: "Index Page"
    },
  }
}

当我尝试运行它时，我在 chrome 窗口上收到了上面的错误。实际上，错误是：

终端截图

我认为这可能是由于缺少配置造成的，但我真的无法弄清楚我需要哪些其他配置。

以前有没有人有类似的问题？有谁知道如何解决它？或者，有没有人有一些成功的多页示例，我可以看看？

真的感谢您的帮助。

标签： vue.jsweberror-handlingconfigwebstorm

解决方案

在我看来，您可能错误地导入了 Vue 组件。如果您想制作多页应用程序，为什么不尝试vue-router呢？也许这不是您问题的直接解决方案，但它将帮助您在未来更好地管理您的页面（路线）。

推荐阅读