CODEWITHSUNDEEP
vue.jsvue-router
Henrique Andrade
Henrique Andrade

Reputation: 991

Vue router mode 'history' not working in development server

I'm using Vue 3 and Vue Router. My app is working with createWebHashHistory, but when I change to mode: 'history' the pages don't load.

const router = createRouter({
  mode: 'history',
  routes
})

I know that in production I have to configure the server to use mode: 'history', but I'm serving the app in a development server using npm run serve.

Upvotes: 0

Views: 4091

Answers (4)

chunrimisa
chunrimisa

Reputation: 51

https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback It works for me, in vue.config.js

devServer: { historyApiFallback: true, },

Upvotes: 0

jeremyjone
jeremyjone

Reputation: 313

This is a Breaking Changes.

The mode: 'history' option has been replaced with a more flexible one named history. Depending on which mode you were using, you will have to replace it with the appropriate function:

  • "history": createWebHistory()
  • "hash": createWebHashHistory()
  • "abstract": createMemoryHistory()

Therefore, you need to update your code to the new way:

createRouter({
  // mode: 'history',
  history: createWebHistory(),
  routes: [],
})

The createRouter receives an options of type RouterOptions, it has no mode attribute.

So, mode: 'history' is not work anymore.

You can see more here(new history option to replace mode)

Upvotes: 0

Marshall
Marshall

Reputation: 57

If this problem occurs, it may be a configuration problem. Check if the publicPath in vue.config.js or config/index.js is / instead of ./

Upvotes: 2

schurmi wu
schurmi wu

Reputation: 1

mode: 'history': does not directly access the project in the production environment, need nginx forwarding,You can use CreateWebhashhistory

Upvotes: 0

Related Questions