1 year ago
#340299
Deny Weller
Vue 3 - How to disable adding trailing slash?
Problem statement : Vue app changes the URL after loading the scripts and adds a slash to the end. This only happens for routes where the path matches /
.
I have the server configured like this :
/game(.*) => Vue 3 App
anything else => reverse proxy
My router :
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
},
{
path: '/:pathMatch(.*)',
component: () => import('../views/NotFound.vue'),
},
];
const router = createRouter({
history: createWebHistory('/game/'),
routes,
strict: true
});
What's happening :
If I request http://localhost/game
, the URL in the address bar changes to http://localhost/game/
. I don't understand why this is happening. What I know for sure is that it's Vue that does it, not the server.
Screen :
If I add something else to the URL, for example http://localhost/game/notfound
, then the slash will not be added to the end.
UPD Additionally, I show my config.vue.js :
process.env.VUE_APP_VERSION = require('./package.json').version;
module.exports = {
publicPath: (process.env.NODE_ENV === 'production' ? '/game' : '/'),
devServer: {
proxy: {
'^/api': {
target: 'http://app:'+process.env.APP_PORT,
ws: false,
changeOrigin: true
},
}
},
lintOnSave: 'default',
productionSourceMap: false
};
And content console.log(process.env) :
{
"NODE_ENV": "production",
"VUE_APP_ENV": "dev",
"VUE_APP_VERSION": "1.0.0",
"BASE_URL": "/game/"
}
vue.js
vue-router
vuejs3
vue-router4
0 Answers
Your Answer