Vue configura el entorno de producción.env.production, test environment.env.development_ no se apresure y recoja una ola y mírela lentamente

Cálmate y mira despacio

En primer lugar, necesitamos construir un proyecto, el

paquete de dependencia se descargará automáticamente, no es necesario poseer npm i

.env se cargará sin importar el entorno. se
cargará el entorno de producción de producción env . se cargará el entorno de
desarrollo de prueba de desarrollo env.

Nuestros siguientes ejemplos están escritos por separado y solo usan .env.production.env.development
Cree dos archivos nuevos en el directorio raíz del proyecto como archivos .env.production. El archivo env.development está

en el archivo y configuramos lo siguiente
en el. archivo env

VUE_APP_NAME='vue测试名称'

Archivo de desarrollo .env .:

NODE_ENV = development  
VUE_APP_URL = 'developmentURL' //自定义变量  必须要以VUE_APP_开头定义

Archivo .env.production:

NODE_ENV = production    
VUE_APP_URL = 'productionURL' //自定义变量  必须要以VUE_APP_开头定义

A continuación, debemos configurar package.json

{
    
    
  "name": "my",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    
    
    "serve": "vue-cli-service serve",
    //打包测试开发版本  
    //--mode 后面需要对用文件的名字.env.development  重点是要和.env.后面的名字对应起来
    "build-development": "vue-cli-service build --mode development",
    //打包生产版本
    //--mode 后面需要对用文件的名字.env.production 重点是要和.env.后面的名字对应起来
    "build-production": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  ...//json文件太长 后面的没用复制过来  主要看上面的scripts
}

A continuación, imprimimos el VUE_APP_URL que configuramos en app.vue

  mounted() {
    
    
    console.log(process.env,'process.env')
    console.log(process.env.VUE_APP_URL, "VUE_APP_URL");
  }

Cuando ejecutamos
npm run serve localmente,
cargaremos los dos archivos .env y .env.development.
Veremos la consola imprimiendo. Podemos

ver que process.env es un objeto global. Podemos agregar las propiedades que necesitamos al object y
ejecutar npm run Cuando se sirve, compilará y probará automáticamente la versión de desarrollo, por lo que podemos agregar variables al archivo .env.development.
Intentamos empaquetar la versión de producción

npm run build-production    

La carpeta dist se generará en el directorio raíz del archivo.

Intentamos abrir dist localmente y ejecutar el archivo empaquetado vue

Necesitamos instalar el paquete npm del servidor http a nivel mundial

npm i -g http-server

Entramos en la carpeta dist y abrimos cmd para
ejecutar http-server

Abrir en el navegador para ver la impresión de la consola

De hecho, es la variable que imprimimos en app.vue, y el valor es el valor que establecemos en .env y .env.production;
esto facilita enormemente nuestro proceso de empaquetado, sin la necesidad de empaquetar URL de prueba y URL de producción de ida y vuelta cada Time Switched ~
Podemos encapsular este VUE_APP_URL en axios para que nuestro desarrollo sea más conveniente ~