1. ¿Qué es el proceso?
El objeto de proceso es una variable global que proporciona información sobre el proceso actual de Node.js y lo controla. A menudo se usa para diferenciar entornos en proyectos Vue. Las configuraciones para diferentes entornos son diferentes, por ejemplo: distinguir la dirección URL de la solicitud en función de variables globales, si iniciar eslint, configuraciones especiales para diferentes entornos, etc.
Puede crear un nuevo archivo js en el proyecto, generar el proceso y obtener un objeto de configuración. Si son demasiados, sólo se mostrarán algunas capturas de pantalla:
2. Cómo utilizar el proceso para distinguir entornos
Hay tres modos en el proyecto Vue: producción, desarrollo, prueba.
1.Modo
El modo es un concepto importante en vue-cli y hay tres modos de forma predeterminada.
Para los comandos que se mencionan a continuación, puede echar un vistazo al archivo package.json en el proyecto y lo comprenderá de un vistazo.
- El modo de desarrollo se utiliza para el servicio vue-cli-service.
- El modo de producción se utiliza para la compilación de vue-cli-service y la prueba de vue-cli-service: unidad.
- el modo de prueba se utiliza para vue-cli-service test:unit
El comando correspondiente al modo de desarrollo en nuestro entorno de desarrollo es el comando de servicio, lo que significa que lo ejecutamos en modo de desarrollo después de iniciar el proyecto.
El modo de producción corresponde a la compilación del comando de empaquetado. Empaquetar y ejecutar en modo de producción.
Puede anular el modo predeterminado para la línea de comando pasando el argumento de opción --mode. Por ejemplo, si desea utilizar variables de entorno de desarrollo en el comando de compilación:
vue-cli-service build --desarrollo en modo
En resumen, puede configurar dinámicamente mediante comandos para configurar las configuraciones correspondientes en el modo.
Generalmente configuramos la dirección de solicitud a través del archivo .env, por ejemplo, si hay varias direcciones, se puede configurar de manera flexible mediante comandos.
2.objeto de entorno Process.env
Habrá diferentes variables de entorno en diferentes modos.
En el modo de desarrollo, el valor de NODE_ENV se establecerá en "desarrollo" y
en el modo de producción, el valor de NODE_ENV se establecerá en "producción".
3. Orden de ejecución de archivos env
.env es el archivo de configuración que se cargará en los entornos de desarrollo y producción
. env.development es el archivo de configuración que se carga en el entorno de desarrollo
. env.production es el archivo de configuración que se carga en el entorno de producción.Orden de carga del entorno de I+D: .env .env.development. Con el mismo nombre de variable, esta última sobrescribirá a la primera.
Orden de carga del entorno de producción: .env .env.production. Con el mismo nombre de variable, esta última sobrescribirá a la primera.
3. Uso del proceso
1. Se utiliza para distinguir direcciones de solicitud en diferentes entornos.
Cree un nuevo archivo .env, como .env.development, y las variables declaradas en el archivo se cargarán en el entorno de desarrollo.
Las variables que comienzan con VUE_APP_ se incrustarán estáticamente en el paquete del lado del cliente mediante webpack .definePlugin. Al acceder a Process.env.VUE_APP_SECRET, agregue variables directamente en el formato VUE_APP_*
# solo una bandera
NODE_ENV = 'desarrollo'# API base
VUE_APP_BASE_API = 'http://10.0.0.165:9588'
Luego solicite la URL y podrá obtener el valor correspondiente.
const service=axios.create({
baseURL: process.env.VUE_APP_BASE_API,//请求地址
timeout: 10000,//请求超时时间，如果超给改时间会中断
// headers: {'X-Custom-Header': 'foobar'}//自定义请求头
})