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.
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 ./
mode: 'history': does not directly access the project in the production environment, need nginx forwarding,You can use CreateWebhashhistory
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:
createWebHistory()createWebHashHistory()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)
createWebHistory() isn't working either, only createWebHashHistory()https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback It works for me, in vue.config.js
devServer: { historyApiFallback: true, },
