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.

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:

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.