An empty page display in my vue.js project, when i run serve/build without any error in my dev tool

JavaScript
1

heres is my main.js

import ‘bootstrap/dist/css/bootstrap.css’;

import ‘jquery/dist/jquery.js’;

import ‘popper.js/dist/popper.js’;

import ‘bootstrap/dist/js/bootstrap.js’;

import { createApp } from ‘@vue/runtime-dom’;

//import router from ‘./router’

import store from ‘./store’;

window.$ = window.jQuery = require(‘jquery’);

window.Popper = require(‘popper.js’).default;

const app = createApp(‘App’);

app.use(store);

[//app.use](https://app.use/)(router);

[//app.mount](https://app.mount/)(’#app’);

and heres my router index.js

import Vue from ‘vue’;

import router from ‘./router’;

import VueRouter from ‘vue-router’;

import Home from ‘…/views/Home.vue’;

import About from ‘…/views/About.vue’;

import Services from ‘…/views/Services.vue’;

import Contact from ‘…/views/Contact.vue’;

import Projects from ‘…/views/Projects.vue’;

export default new VueRouter({

// … your router configuration

routes: [

{

  path: '/',

  component: Home,

},

{

  path: '/about',

  component: About,

},

{

  path: '/Service',

  component: Services,

},

{ path: '/Contact', component: Contact },

{ path: '/Projects', component: Projects },

],

});

new Vue({

router,

// …

}).$mount(’#app’);

2

It looks like there are a few syntax issues in your code.

First, in your main.js file, you are using incorrect quotes. You should be using single quotes (') instead of curly quotes (‘ ’).

Second, it seems that you are missing the import statement for the router in your main.js file. You should add this line:

import router from './router';

And then use the router in your app:

app.use(router);

Lastly, in your router index.js file, you are creating a new instance of VueRouter but not actually using it in your Vue instance. To fix this, you need to pass the router as an option to your Vue instance:

new Vue({
  router,
  // …
}).$mount('#app');

Here is the improved code for main.js:

import 'bootstrap/dist/css/bootstrap.css';
import 'jquery/dist/jquery.js';
import 'popper.js/dist/popper.js';
import 'bootstrap/dist/js/bootstrap.js';
import { createApp } from '@vue/runtime-dom';
import store from './store';

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;

const app = createApp('App');
app.use(store);
//app.use(router);
//app.mount('#app');

And here is the improved code for index.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Services from '../views/Services.vue';
import Contact from '../views/Contact.vue';
import Projects from '../views/Projects.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  // … your router configuration
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About,
    },
    {
      path: '/Service',
      component: Services,
    },
    { 
      path: '/Contact', 
      component: Contact 
    },
    { 
      path: '/Projects', 
      component: Projects 
    }
  ],
});

new Vue({
  router,
  // …
}).$mount('#app');