I am trying to change the public path for production build but can't seem to get it to work. When I build for production, I would like to change the public path from / to ./ but I could not find anything in the documentation how to do this. I am using vite.js as my build tool. Maybe this is something Vue 3 and Vite specific, I'm not sure.
I have tried adding a vue.config.js file and also .env variables but so far nothing is working.
When I build, I get this output with path starting with /:
<head>
<script src="/assets/index.30c61b3b.js"></script>
<link href="/assets/vendor.29497e16.js">
<link href="/assets/index.7123a98f.css">
</head>
But for production I would like it to change to ./ like this:
<head>
<script src="./assets/index.30c61b3b.js"></script>
<link href="./assets/vendor.29497e16.js">
<link href="./assets/index.7123a98f.css">
</head>
I tried adding vue.config.js but it is not helping:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}
and also .env
NODE_ENV=production
BASE_URL=./
I found the answer, I needed to add a base option to vite.config.js like this:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
reactivityTransform: true
})
],
base: './',
})