How can I solve "This relative module was not found:" problem? (Vue)

Viewed 4152

When I try to run the application with npm start, I get a following error:


This relative module was not found:

  • ./src/router/index.js in ./src/main.js

And this is my main.js:

/ The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './src/router/index.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

And this is my index.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Firstpage from "../components/Firstpage.vue";

Vue.use(VueRouter);

const router = new VueRouter ({
    mode: "history",
    routes: [
    {
        path: "/",
        component: Firstpage
    },
    ]
});

Also my node_modules marked with gray color. I expected this is router problem. How can I solve this problem?

++

This is my project file structure: Project file structure

And actually, I have another problem. I can't get my picture from my assets. I already add this code to my component.

Can someone solve this problem? Thank you.

2 Answers

When you use '.' to begin your path, you are telling your relative path is starting from the current directory. So in your case the path to your router is obviously wrong. It should be

import router from './router/index.js'.

You do not have src in your current folder where you have the main.js. You are already inside src, so you just have to go into the router

Your node_modules is grayed because that folder is not tracked by your version controlling system (Git). It is configured in the file named .gitignore to ignore tracking this folder. You can read more whether you should or should not track your node_modules folder.

Please check your node version.install latest

Related