vue3+vite+ts Projektkonfiguration, Entwicklungsumgebung und Produktionsumgebung, Paketierungsbefehlskonfiguration

Die Konfigurations- und Verpackungsmethoden der Entwicklungsumgebung und der Produktionsumgebung sind unterschiedlich. Im Folgenden finden Sie eine detaillierte Beschreibung der Konfigurations- und Verpackungsmethoden der Entwicklungsumgebung und der Produktionsumgebung basierend auf dem vue3 + vite + ts-Projekt.

1. Konfiguration der Entwicklungsumgebung

Die Konfiguration der Entwicklungsumgebung dient hauptsächlich dazu, Entwicklern das Debuggen und Testen zu erleichtern. Im Folgenden sind die Konfigurationsschritte der Entwicklungsumgebung aufgeführt:

1.1 Installationsabhängigkeiten

Zuerst müssen Sie Abhängigkeiten installieren. Sie können NPM oder Garn zum Installieren verwenden. Der spezifische Befehl lautet wie folgt:

npm install 或 yarn

1.2 Konfigurieren Sie vite.config.ts

Erstellen Sie eine vite.config.ts-Datei im Projektstammverzeichnis und konfigurieren Sie den folgenden Inhalt:

import {
    
     defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    
    
  plugins: [vue()],
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

1.3 Konfiguration.env.Entwicklung

Erstellen Sie eine .env.development-Datei im Projektstammverzeichnis und konfigurieren Sie den folgenden Inhalt:

VITE_APP_BASE_API=http://localhost:3000/api

Hier wird die Basisadresse der Schnittstelle konfiguriert, was für den Aufruf der Schnittstelle während der Entwicklung praktisch ist.

1.4 Konfigurieren Sie tsconfig.json

Erstellen Sie eine tsconfig.json-Datei im Projektstammverzeichnis und konfigurieren Sie den folgenden Inhalt:

{
    
    
  "compilerOptions": {
    
    
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "strict": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
    
    
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

1.5 Starten Sie das Projekt

Der Befehl zum Starten des Projekts lautet wie folgt:

npm run dev 或 yarn dev

2. Konfiguration der Produktionsumgebung

Die Konfiguration der Produktionsumgebung dient hauptsächlich der Optimierung der Projektleistung und der Reduzierung des Verpackungsvolumens. Im Folgenden sind die Konfigurationsschritte der Produktionsumgebung aufgeführt:

2.1 Konfigurieren Sie vite.config.ts

Fügen Sie die folgende Konfiguration in vite.config.ts hinzu:

export default defineConfig({
    
    
  plugins: [vue()],
  build: {
    
    
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    terserOptions: {
    
    
      compress: {
    
    
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
});

Hier werden das Verpackungsausgabeverzeichnis, das statische Ressourcenverzeichnis, ob eine Quellzuordnung generiert werden soll und Optionen zur Codekomprimierung konfiguriert.

2.2 Bereitstellung .env.produktion

Erstellen Sie eine .env.produktionsdatei im Projektstammverzeichnis und konfigurieren Sie den folgenden Inhalt:

VITE_APP_BASE_API=https://api.example.com

Hier wird die Basisadresse der Schnittstelle in der Produktionsumgebung konfiguriert.

2.3 Paketprojekt

Der Befehl zum Packen des Projekts lautet wie folgt:

npm run build 或 yarn build

Nach Abschluss der Verpackung wird unter dem Projektstammverzeichnis ein dist-Verzeichnis generiert, das die gepackten statischen Dateien und index.html-Dateien enthält, die direkt auf dem Server bereitgestellt werden können.

3. Unterscheiden Sie zwischen Verpackungen in verschiedenen Umgebungen

In der Entwicklungsumgebung und in der Produktionsumgebung müssen wir zwischen verschiedenen Verpackungsmethoden unterscheiden. Im Folgenden sind die Möglichkeiten zur Unterscheidung der Verpackungsbefehle aufgeführt:

3.1 Konfigurieren Sie package.json

Fügen Sie die folgenden Skripte in package.json hinzu:

{
    
    
  "scripts": {
    
    
    "dev": "vite",
    "build:dev": "vite build",
    "build:prod": "cross-env NODE_ENV=production vite build"
  }
}

Hier werden drei Befehle konfiguriert, nämlich der Startbefehl für die Entwicklungsumgebung, der Verpackungsbefehl für die Entwicklungsumgebung und der Verpackungsbefehl für die Produktionsumgebung.

3.2 Paketprojekt

Führen Sie den folgenden Befehl in der Entwicklungsumgebung aus:

npm run dev

Führen Sie den folgenden Befehl in der Produktionsumgebung aus:

npm run build:prod

Auf diese Weise können unterschiedliche Umgebungen für die Verpackung unterschieden werden.