Vue-router only loading the base path in an application created without using vue cli

Question

I am creating a vue application from scratch without using vue cli. Problem is I'm unable to load any other route aside from the base '/' route. Please inspect the code and help where it might have gone wrong.

routes.js file

import Vue from 'vue'
import Router from 'vue-router'

import Home from './HomePage.vue'
import ErrorPageComponent from './ErrorPage.vue'
import AccountsPage from './AccountsPage.vue'


Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },

    {
      path: '/accounts',
      name: 'accounts',
      component: AccountsPage,
    },

    {
      path: '/error',
      name: 'error',
      component: ErrorPageComponent,
    },

    {
      path: '*',
      redirect: '/error'
    }
  ]
})

App.vue file.

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

main.js file code.

import Vue from 'vue'
import App from './App.vue'
import router from './pages/routes'


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

Code for package.json

{
  "name": "vue_without_cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clean": "rimraf dist",
    "build": "npm run clean && webpack --mode production",
    "serve": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "file-loader": "^6.0.0",
    "i": "^0.3.6",
    "style-loader": "^1.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/preset-env": "^7.11.0",
    "animate": "^1.0.0",
    "axios": "^0.19.2",
    "babel-loader": "^8.1.0",
    "bootstrap": "^4.5.2",
    "css-loader": "^4.2.1",
    "html-webpack-plugin": "^4.3.0",
    "rimraf": "^3.0.2",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.3",
    "vue-router": "^3.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "vuex": "^3.5.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

Webpack config file.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
  ]
};

Babel.config.js

module.exports = {
  presets: ['@babel/preset-env'],
}

Same routing configuration in my other Vue projects which I created using vue-cli seem to work with ease. I reckon I might have missed something related to routing while setting up my project from scratch instead of using vue-cli. Please help me with this.

Just changed my configuration to match yours and it's working fine for me — Daniel_Knights, Aug 08 '20 at 11:09
Are you sure it's installed correctly? Are you getting any errors? — Daniel_Knights, Aug 08 '20 at 11:09
remove `mode: 'history',` and try `localhost:8080/#/accounts` ? — xianshenglu, Aug 08 '20 at 11:10
I removed the 'history' mode, restarted the server and it worked ! But what if I want to keep the 'history' mode ? Is it possible ? I've updated my code in the question. — APFirebolt, Aug 08 '20 at 13:31

score 0 · Answer 1 · answered Aug 11 '20 at 06:06

In comment, I notice that you are already find a solution which are remove the history mode.

Anthor solution is add a simple catch-all fallback route to your server.For example, both of http://example.com and http://example.com/accounts and the all of route path should return the same index.html page.I think the HTML5 History Mode chapter of offical document will help you to config server properly.

Vue-router only loading the base path in an application created without using vue cli

1 Answers1