creathir
BaseURL + Uncommon Configuration With Reverse Proxy
So we ended up writing a custom server plugin (last one which runs) which modifies the outbound payload of a request:
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:response', (response) => {
const pathPrefix = getPathPrefix();
const config = useRuntimeConfig();
const newPath =
${pathPrefix}${config.app.buildAssetsDir}.replace('//', '/');
const pathRegex = new RegExp(config.app.buildAssetsDir, 'g');
response.body = response.body.replace(pathRegex, newPath, 'g');
});
});
And we modified the Vue router with a app/router.options.ts which sets up the client router with our concept of a path prefix:
export default <RouterConfig>{
history: (base) => {
const pathPrefix = getPathPrefix();
return createWebHistory(pathPrefix base);
},
};
Then a nuxt plugin (very first nuxt plugin which runs) which sets things up on the client side:
export default defineNuxtPlugin({
order: -40,
setup: (nuxtApp) => {
const pathPrefix = getPathPrefix();
if (!pathPrefix) return;
const currentPath = window.location.pathname;
const modifiedPath = currentPath.replace(pathPrefix, '');
nuxtApp.payload.path = modifiedPath '/'; // We are running in a subdirectory, so we need to set the path to root
},
});
All make use of a util for getting the pathPrefix from our runtime config:
export const getPathPrefix = () => {
const {
public: { pathPrefix },
} = useRuntimeConfig();
return pathPrefix.endsWith('/') ? pathPrefix.substring(0, pathPrefix.length - 1) : pathPrefix;
};14 replies