Vue CLI3.0创建多页面应用，报错怎么办？

Question

我是 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生成的，因为我只是想测试多页，所以我认为不会是编码问题。

这是我所做的：

I created a folder called the index under the src folder, I then move all the files and folders that originally under src to index because I wish the components and assets are only used in the corresponding page.

我的vue.config.js是：

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

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

我觉得可能是配置缺失导致的，但是实在想不通还需要哪些配置。

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

非常感谢您的帮助。

Answer 1

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

Answer 2

我相信 @ 是 src 文件夹的快捷方式。这意味着您当前的路径解析为 src/components/HelloWorld.vue。

您可以尝试@/index/components/HelloWorld.vue，这应该是正确的路径。

Vue CLI3.0创建多页面应用，报错怎么办？

Creating multi-page application with Vue CLI3.0, how to handle this error?

error-handling

config

webstorm

web

vue.js