Solve the problem that vue-router cannot display the routing page normally when building

Create a webpack project using vue cli

Join vue-router and then use routing to introduce a new component. This is how the route and link are written

const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 routes: [
 {
  path: '/first',
  component: firstCom
 }
 ]
})

<a href="/first" rel="external nofollow" >Try this!</a>

1. No problem with npm run dev viewing

2. npm run build package

3. Start a service (for example: python -m SimpleHTTPServer) and then check the page, and find that the route will request the /first page.

4. Solution: Change history to hash in the routing configuration, and change /first in the link to /#/first. Problem solved.

==================== Updated 2017.8.24====================

I found some information and found that it is actually possible to use history for router mode. I had a problem while doing the jump. I took it for granted that I used = "", and I should actually use it. The handleSelect in the code is because it uses a message processing method that appears in element ui. It can be understood that this method is triggered when the key is clicked. If the key of the key is 2, then jump to first, and the key is 3 and jump to second.

<script>
 export default {
 data () {
  return {
  }
 },
 methods: {
  handleSelect(key, keyPath) {
  if (key == 2){
   this.$('first');
  } else if (key == 3){
   this.$('second');
  }
  }
 }
 }
</script>

The above article solves the problem that vue-router cannot display the routing page normally through build. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.