Los métodos de configuración y empaquetado del entorno de desarrollo y el entorno de producción son diferentes. La siguiente es una descripción detallada de los métodos de configuración y empaquetado del entorno de desarrollo y el entorno de producción basados en el proyecto vue3+vite+ts.
- Configuración del entorno de desarrollo
La configuración del entorno de desarrollo es principalmente para la comodidad de los desarrolladores para depurar y probar. Los siguientes son los pasos de configuración del entorno de desarrollo:
1.1 Dependencias de instalación
Primero necesita instalar las dependencias, puede usar npm o yarn para instalar, el comando específico es el siguiente:
npm install 或 yarn
1.2 Configurar vite.config.ts
Cree un archivo vite.config.ts en el directorio raíz del proyecto y configure el siguiente contenido:
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 configuración.env.desarrollo
Cree un archivo .env.development en el directorio raíz del proyecto y configure el siguiente contenido:
VITE_APP_BASE_API=http://localhost:3000/api
La dirección base de la interfaz se configura aquí, lo cual es conveniente para llamar a la interfaz durante el desarrollo.
1.4 Configurar tsconfig.json
Cree un archivo tsconfig.json en el directorio raíz del proyecto y configure el siguiente contenido:
{
"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 Iniciar el proyecto
El comando para iniciar el proyecto es el siguiente:
npm run dev 或 yarn dev
- Configuración del entorno de producción
La configuración del entorno de producción es principalmente para optimizar el rendimiento del proyecto y reducir el volumen de empaquetado.Los siguientes son los pasos de configuración del entorno de producción:
2.1 Configurar vite.config.ts
Agregue la siguiente configuración en vite.config.ts:
export default defineConfig({
plugins: [vue()],
build: {
outDir: 'dist',
assetsDir: 'assets',
sourcemap: false,
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
});
Aquí se configuran el directorio de salida del paquete, el directorio de recursos estáticos, si generar un mapa fuente y las opciones de compresión de código.
2.2 Implementación .env.producción
Cree un archivo .env.production en el directorio raíz del proyecto y configure el siguiente contenido:
VITE_APP_BASE_API=https://api.example.com
Aquí se configura la dirección base de la interfaz en el entorno de producción.
2.3 Proyecto de paquete
El comando para empaquetar el proyecto es el siguiente:
npm run build 或 yarn build
Una vez que se completa el empaquetado, se generará un directorio dist en el directorio raíz del proyecto, que contiene los archivos estáticos empaquetados y los archivos index.html, que se pueden implementar directamente en el servidor.
- Diferenciar entre envases en diferentes entornos.
En el entorno de desarrollo y el entorno de producción, debemos distinguir entre diferentes métodos de empaquetado. Las siguientes son formas de distinguir los comandos de empaquetado:
3.1 Configurar paquete.json
Agregue los siguientes scripts en package.json:
{
"scripts": {
"dev": "vite",
"build:dev": "vite build",
"build:prod": "cross-env NODE_ENV=production vite build"
}
}
Aquí se configuran tres comandos, a saber, el comando de inicio del entorno de desarrollo, el comando de empaquetado del entorno de desarrollo y el comando de empaquetado del entorno de producción.
3.2 Proyecto de paquete
Ejecute el siguiente comando en el entorno de desarrollo:
npm run dev
Ejecute el siguiente comando en el entorno de producción:
npm run build:prod
De esta forma, se pueden distinguir diferentes entornos para el envasado.