Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al final todos los archivos estáticos que hay que servir deben estar en la carpeta dist, pero si quieres servirla en Apache déjame darte algunos consejos.
Configurando vite.config.js
Para que la PWA con SQLite3 y Vue 3 sea servida con Apache correctamente hay que configurar la ubicación base.
En vite.config.js hay que poner:
base: "./",
Al menos en mi caso mi vite.config.js queda así:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
build: {
target: "es2022",
rollupOptions: {
output: {
banner: `/*!
* (c) 2024-present Parzibyte
* https://parzibyte.me/blog/
* Date: ${new Date().toISOString().slice(0, 10)}
*/`,
footer: `/*!
* (c) 2024-present Parzibyte
* https://parzibyte.me/blog/
* Date: ${new Date().toISOString().slice(0, 10)}
*/`,
}
}
},
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
base: "./",
server: {
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
},
},
optimizeDeps: {
exclude: ['@sqlite.org/sqlite-wasm'],
},
})
Configurando CORS 2 y Mime type
Esto solo es necesario si tu aplicación contiene SQLite3 o archivos WebAssembly (wasm).
Al momento de escribir este post, Apache no conocía el tipo MIME para Wasm así que hay que agregarlo. También es necesario establecer los headers llamados “CORS 2” para que SQLite3 funcione.
Yo lo he hecho con un archivo .htaccess en la misma ubicación donde la aplicación es servida:
Header always set Cross-Origin-Opener-Policy "same-origin"
Header always set Cross-Origin-Embedder-Policy "require-corp"
AddType application/wasm wasm
De este modo ya solo tenemos que compilar con npm run build y subir el contenido de dist.