Tengo un problema con el servicio de datos estáticos expresos en el proyecto vue 2 (plantilla simple de paquete web) debido a la diferente estructura de producción y desarrollo.
desarrollo: host local/aplicación
producción: servidor/algún-directorio/aplicación
algún directorio cambia con bastante frecuencia, por lo que se establece dinámicamente en el archivo de configuración.
Mi parte de servicio de server.js:
if (config.root !== '/') { app.use(`/${config.root}`, express.static(path.join(__dirname))); } app.use('/dist', express.static(path.join(__dirname, 'dist')));Los archivos JS transpilados están en la carpeta /dist.
Este es el archivo index.html que sirve como punto de entrada de la aplicación:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>App Demo</title> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> </body> </html>Funciona en desarrollo porque la aplicación está en la raíz.
Pero en la compilación de producción no funciona porque la aplicación se sirve desde la subcarpeta del servidor.
¿Alguna idea de como resolver esto?
Gracias.
Suponiendo que su servidor express js está en la misma carpeta que su aplicación vue:
const express = require('express'); const path = require('path'); const hostname = 'localhost'; const port = 3000; const app = express(); app.use(express.static(path.join(__dirname, 'dist'))); app.get('*', (req, res) => { res.sendFile(__dirname, '/dist/index.html'); }); app.listen(port, hostname, () => { console.log("Listening at http://%s:%s/", hostname, port); });¡No olvides crear tu aplicación Vue primero!
Pero en la compilación de producción no funciona porque la aplicación se sirve desde la subcarpeta del servidor.
La frase "no funciona" no nos dice nada, en realidad. ¿Qué no funciona? ¿Te sale algún error en el cliente? ¿Error en el servidor? ¿Obtienes 404 para HTML? HTML está bien pero 404 para imágenes? No especificaste qué es lo que está mal, así que solo puedo darte algunos consejos generales aquí.
Si crea un enrutador con Express:
const router = require('express').Router(); router.get('/a', ...); router.get('/b', ...); router.use('/c', express.static(...));entonces podrá poner toda su aplicación en cualquier ruta secundaria muy fácilmente:
app.use('/x', router); donde /x es su prefijo requerido.
Pero también debe asegurarse de que todos sus activos estáticos, como los archivos HTML, no usen rutas absolutas, por ejemplo, cosas como:
<a href="/a/b/c.html">...</a> <script src="/a/b/c.js"></script>pero solo rutas relativas como:
<a href="b/c.html">...</a> <script src="../../a/b/c.js"></script>etc. Esto también es cierto si deja su aplicación en paz y usa un proxy inverso para agregar el prefijo de ruta requerido, lo que también podría hacer en lugar de jugar con su código de Nodo, y puede ser más fácil en este caso. Para obtener más información sobre proxies inversos con aplicaciones Node, consulte estas preguntas: