Les méthodes de configuration et de packaging de l'environnement de développement et de l'environnement de production sont différentes.Ce qui suit est une description détaillée des méthodes de configuration et de packaging de l'environnement de développement et de l'environnement de production basé sur le projet vue3+vite+ts.
- Configuration de l'environnement de développement
La configuration de l'environnement de développement est principalement destinée à faciliter le débogage et le test des développeurs. Voici les étapes de configuration de l'environnement de développement :
1.1 Dépendances d'installation
Vous devez d'abord installer les dépendances, vous pouvez utiliser npm ou yarn pour l'installation, la commande spécifique est la suivante :
npm install 或 yarn
1.2 Configurer vite.config.ts
Créez un fichier vite.config.ts dans le répertoire racine du projet et configurez le contenu suivant :
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 configuration.env.development
Créez un fichier .env.development dans le répertoire racine du projet et configurez le contenu suivant :
VITE_APP_BASE_API=http://localhost:3000/api
L'adresse de base de l'interface est configurée ici, ce qui est pratique pour appeler l'interface pendant le développement.
1.4 Configurer tsconfig.json
Créez un fichier tsconfig.json dans le répertoire racine du projet et configurez le contenu suivant :
{
"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 Démarrer le projet
La commande pour démarrer le projet est la suivante :
npm run dev 或 yarn dev
- Configuration de l'environnement de production
La configuration de l'environnement de production vise principalement à optimiser les performances du projet et à réduire le volume de conditionnement. Voici les étapes de configuration de l'environnement de production :
2.1 Configurer vite.config.ts
Ajoutez la configuration suivante dans vite.config.ts :
export default defineConfig({
plugins: [vue()],
build: {
outDir: 'dist',
assetsDir: 'assets',
sourcemap: false,
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
});
Le répertoire de sortie de l'empaquetage, le répertoire des ressources statiques, s'il faut générer le mappage source et les options de compression du code sont configurés ici.
2.2 Déploiement .env.production
Créez un fichier .env.production dans le répertoire racine du projet et configurez le contenu suivant :
VITE_APP_BASE_API=https://api.example.com
L'adresse de base de l'interface dans l'environnement de production est configurée ici.
2.3 Projet package
La commande pour empaqueter le projet est la suivante :
npm run build 或 yarn build
Une fois l'empaquetage terminé, un répertoire dist sera généré sous le répertoire racine du projet, qui contient les fichiers statiques empaquetés et les fichiers index.html, qui peuvent être directement déployés sur le serveur.
- Différencier les emballages dans différents environnements
Dans l'environnement de développement et l'environnement de production, nous devons faire la distinction entre les différentes méthodes d'empaquetage. Voici les façons de distinguer les commandes d'empaquetage :
3.1 Configurer package.json
Ajoutez les scripts suivants dans package.json :
{
"scripts": {
"dev": "vite",
"build:dev": "vite build",
"build:prod": "cross-env NODE_ENV=production vite build"
}
}
Trois commandes sont configurées ici, à savoir la commande de démarrage de l'environnement de développement, la commande de conditionnement de l'environnement de développement et la commande de conditionnement de l'environnement de production.
3.2 Package projet
Exécutez la commande suivante dans l'environnement de développement :
npm run dev
Exécutez la commande suivante dans l'environnement de production :
npm run build:prod
De cette manière, différents environnements peuvent être distingués pour l'emballage.