1 year ago

#340299

test-img

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 :

enter image description here

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

Accepted video resources