2
votes

I just wanted to setup my vue project with the full webpack template, use vue router and link different urls to different components.

The src/router/index.html is the following:

import Vue from 'vue';
import Router from 'vue-router';
// eslint-disable-next-line
import Home from '../pages/home.vue';
// eslint-disable-next-line
import Config from '../pages/config.vue';

Vue.use(Router);

export default new Router({
  mode: 'hash',
  routes: [
    { path: '/', component: Home },
    { path: '/config', component: Config },
  ],
});

When I run npm run dev and access the above routes, I have the following output:

enter image description here

enter image description here

enter image description here

Up to here, everything is working fine. The problem is when I use the history mode, I can’t access to localhost:8080/config:

enter image description here

And the console doesn’t show any error:

enter image description here

Another thing I tried was switching the mode to history using the simple-webpack template. The worst part is that it worked! So, the problem is in the webpack-template, but I don't know how to make this work.

I'll appreciate any help.

Looks like there were some changes in the webpack template related to the historyApiFallback option used by history mode (GitHub commit). Try creating a new project so it uses the latest version of the template. It could still be broken, though, so you may have to change that line to historyApiFallback: true manually.yuriy636
I did what yurir636 said: just change the historyApiFallback to true in the webpack.dev.conf.js file, and that solved the problem.Joaco Terniro
I got a blank page when using route with paramsJoão Saro