Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *