Search code examples
vue.jsweberror-handlingconfigwebstorm

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

I am a beginner of Vue and I am trying to build a multi-page web application with Vue for practice. But I am having this problem below:

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'

Here is the file tree of my project, every file is generated by Vue because I only want to test the multi-page, so I think it wouldn't be a coding problem.

The screenshot of WebStorm

Here is what I did:

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.

My vue.config.js is:

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

When I try to run it, I got the error above on the chrome window. And actually, the error is:

The screen shot of terminal

I think it might be caused by missing of configurations, but I really cannot figure out what those other configurations I need.

Does anyone have similar problem before? Does anyone know how to solve it? Or, does anyone have some successful multi-page example that I could take a look?

Really thanks for the help.

Solution

  • I believe @ is a shortcut for the src folder. Which would mean your current path resolves to src/components/HelloWorld.vue.

    You could try doing @/index/components/HelloWorld.vue, which should be the correct path.