Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue Js 2 / Vue-CLI 3 / When hosted shows empty blank page

Vue Js app working fine in dev mode, but as I upload it on the server, it simply displays a blank page. All the resources are showing up in the developer console. I am using vue-router package.

VueJs 2 / Vue-CLI-3

Below is my App.vue

<template>
  <div id="app">
    <m-nav/>
    <router-view></router-view>  
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'

export default {
  name: 'app',
  components: {
    'm-nav':Navbar

  }
}


</script>



<style>

</style>

This is my main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import HomePage from './components/HomePage.vue'
import Brochure from './components/Brochure.vue'
import Register from './components/Register.vue'

Vue.config.productionTip = false

Vue.use(VueRouter);

const routes = [
    {
        path:'/',
        component: HomePage
    },
    {
        path:'/download',
        component: Brochure
    },
    {
        path:'/register',
        component: Register
    }
];

const router = new VueRouter({
    routes,
    mode: 'history'
});

new Vue({
    router,
    render: h => h(App),
}).$mount('#app');

after running npm run build, It shows a blank page, although I can see some stuff in the DOM <div id="app"></div>

http://prntscr.com/lvasvo

I am not getting, where I have made a mistake! The project is complete, but stuck on this part! :(

like image 990
Ravi Wadhwani Avatar asked Dec 15 '18 13:12

Ravi Wadhwani


People also ask

Is vue 2 still supported?

Vue 2 has now entered maintenance mode: it will no longer ship new features, but will continue to receive critical bug fixes and security updates for 18 months starting from the 2.7 release date. This means Vue 2 will reach End of Life by the end of 2023.

What is vue cli service lint?

vue-cli-service lintLints and fixes files. If no specific files are given, it lints all files in src and tests , as well as all JavaScript files in the root directory (these are most often config files such as babel. config. js or .

How do you fix vue cli service is not recognized as an internal or external command operable program or batch file?

To solve the error "'vue-cli-service' is not recognized as an internal or external command, operable program or batch file", install the @vue/cli-service package globally by running npm install -g @vue/cli-service and clear your npm cache.


2 Answers

follow this tips:

  1. use <%= BASE_URL %> for script and link tags which wrote on index.html
  2. create vue.config.js in root of project and config your public path for production and development mode like:
module.exports = {
  publicPath:
    process.env.NODE_ENV === "production" ? "/" : "/"
  }
};

just use relative path, to know more about it, read this link:

https://cli.vuejs.org/config/#publicpath

create config.vue.js

like image 190
Milad Mohammadi Avatar answered Oct 21 '22 22:10

Milad Mohammadi


In my case the issue was in the Router.beforeEach function that I had in index.js file inside the router folder to add a route guard. I had to rewrite it after upgrading it from Vue 2 to Vue 3 to make it work.

like image 43
Balasubramanian S Avatar answered Oct 21 '22 22:10

Balasubramanian S