I want to have the ability to set the base URL at build time. This is more for API calls than anything else – I don’t want them going to https://localhost:7251
on production, but I also don’t want to resort to anything convoluted to swap the URLs.
I’ve a vite.config.js file that looks like this:
export default defineConfig (({ command, mode, isSsrBuild, isPreview }) => {
const commonConfig = {
build: {
outDir: '../../wwwroot/dist',
assetsDir: '',
emptyOutDir: true,
manifest: true,
rollupOptions: {
input: {
client: './src/client.js'
}
},
},
server: {
port: 5173,
strictPort: true,
hmr: {
clientPort: 5173
}
},
plugins: [
vue(),
VueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
};
let envConfig = {};
if (command === 'serve') { // configure dev, serve is an alias of 'dev'
envConfig = {
base: 'https://localhost:7251/'
};
} else if (command === 'build') {
envConfig = {
// production URL
};
}
return Object.assign(commonConfig, envConfig);
}
)
According to the Vite docs, if I set the value of ‘base’ in vite.config.js, this will be available as import.meta.env.BASE_URL
in the application. Yet everywhere I reference it in the application, the value is /
and not https://localhost:7251
.
I’m not sure what to try here. I found in the vue docs mention of a define
property that supposedly nests env vars, but using it just gave me CORS errors on some new .mjs file.