El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Construint per a producció

Següent ►
►

En aquest tema, aprendrem com preparar una aplicació Vue.js per a la producció. Això inclou optimitzacions de rendiment, minificació de codi, eliminació de codi mort i configuració de l'entorn de producció. Aquests passos són essencials per assegurar que la teva aplicació sigui ràpida, eficient i segura quan es desplegui en un entorn de producció.

  1. Configuració de l'entorn de producció

Variables d'entorn

Vue CLI utilitza fitxers .env per gestionar les variables d'entorn. Per a la producció, podem crear un fitxer .env.production per definir les variables específiques de l'entorn de producció.

# .env.production
VUE_APP_API_URL=https://api.example.com
NODE_ENV=production

Configuració de vue.config.js

El fitxer vue.config.js permet personalitzar la configuració de Webpack. Aquí podem afegir configuracions específiques per a la producció.

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  },
};

  1. Optimització del rendiment

Minificació de codi

La minificació redueix la mida dels fitxers JavaScript eliminant espais en blanc, comentaris i altres elements innecessaris. Vue CLI utilitza Terser per a la minificació automàtica en mode de producció.

Eliminació de codi mort

Webpack elimina automàticament el codi que no s'utilitza (codi mort) durant el procés de construcció. Això redueix la mida del paquet final.

Divisió de codi

La divisió de codi permet carregar només les parts necessàries de l'aplicació quan es necessiten, millorant el temps de càrrega inicial.

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  },
};

  1. Construcció de l'aplicació

Per construir l'aplicació per a producció, utilitzem el següent comandament:

npm run build

Aquest comandament crea una carpeta dist amb els fitxers optimitzats per a la producció.

  1. Anàlisi del paquet

És important analitzar la mida del paquet per identificar possibles millores. Vue CLI proporciona una eina d'anàlisi integrada.

npm run build --report

Això generarà un informe visual de la mida dels fitxers i els seus continguts.

  1. Configuració del servidor

Servidor estàtic

Per desplegar l'aplicació, podem utilitzar un servidor estàtic com Nginx. Aquí teniu un exemple de configuració per a Nginx:

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/your/dist;
    try_files $uri $uri/ /index.html;
  }
}

Servidor Node.js

Si utilitzes un servidor Node.js, pots servir els fitxers estàtics amb Express:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Exercici pràctic

Objectiu

Construir i desplegar una aplicació Vue.js en un servidor estàtic.

Passos

  1. Configura les variables d'entorn en un fitxer .env.production.
  2. Personalitza el fitxer vue.config.js per a la producció.
  3. Executa npm run build per construir l'aplicació.
  4. Configura un servidor estàtic (Nginx o similar) per servir els fitxers de la carpeta dist.

Solució

  1. Crea un fitxer .env.production:
VUE_APP_API_URL=https://api.example.com
NODE_ENV=production
  1. Configura vue.config.js:
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  },
};
  1. Executa el comandament de construcció:
npm run build
  1. Configura Nginx:
server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/your/dist;
    try_files $uri $uri/ /index.html;
  }
}

Conclusió

En aquesta secció, hem après com preparar una aplicació Vue.js per a la producció, incloent la configuració de l'entorn, optimització del rendiment, construcció de l'aplicació i configuració del servidor. Aquests passos són essencials per assegurar que la teva aplicació sigui ràpida, eficient i segura quan es desplegui en un entorn de producció. En el següent tema, explorarem com desplegar aplicacions Vue.js en diferents plataformes.

◄ Anterior
◄
Següent ►
►

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats