Un, la différence entre les trois
d'habitude. Nous allons créer trois fichiers de .env .env.development .env.production dans le répertoire racine:
.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件
Deuxièmement, un exemple simple d'utilisation de variables d'environnement.
Il est à noter que le nom d'attribut dans le fichier de configuration doit commencer par VUE_APP_, et le
contenu du fichier .env:
VUE_APP_testName = '无论开发还是生产环境都会执行的内容'
Contenu du fichier .env.development:
VUE_APP_testName = '测试环境下内容'
Le contenu du fichier .env.production
VUE_APP_testName = '生产环境下的内容'
Tout d'abord, Vueau démarrage, que ce soit dans l'environnement de développement ou dans l'environnement de production, il chargera toujours .envle contenu du fichier, puis =>根据Node环境变量'NODE_ENV'的值来选择加载'development'还是'production'
Troisièmement, quelle est la variable d'environnement de nœud et pourquoi peut-elle être utilisée pour déterminer s'il faut charger le développement ou la production?
Cela commence par le processus de variable globale du nœud.
Si vous ne savez pas quelles sont les variables globales de node? Pensez simplement à une autre variable globale globale de node. C'est aussi un objet, qui contient:
__dirname: 当前文件所在文件夹的绝对路径
__filename: 当前文件的绝对路径
setInterval / clearInterval : 和浏览器中window对象上的定时器一样
setTimeout / clearTimeout : 和浏览器中window对象上的定时器一样
console : 和浏览器中window对象上的打印函数一样
Avec une telle série d'attributs, vous en serez plus familier! !
Le premier point:
Dans node, le processus de variable globale représente le processus de nœud actuel. process.env contient des informations sur l'environnement système.
En d'autres termes, processus est une variable globale qui a été créée au bas de l'environnement d'exploitation du nœud, qui stocke les informations de configuration liées à l'environnement du nœud. En supposant qu'un code js est exécuté localement avec le nœud, le processus peut être imprimé directement.
Ceci n'est pas imprimé dans la console du navigateur, car il s'agit de l'environnement du navigateur et non de l'environnement du nœud. Il y a une différence entre les deux.
Le deuxième point: qu'est-ce que process.env.NODE_ENV?
Mais NODE_ENV n'existe pas dans process.env. NODE_ENV est une variable définie par l'utilisateur et son objectif dans Webpack est de juger de l'environnement de production, de l'environnement de développement ou de l'environnement de test.
En d'autres termes, une propriété nommée NODE_ENV a été configurée pour l'objet process.env dans webpack. Et utilisez cet attribut pour déterminer s'il s'agit d'un environnement de production ou d'un environnement de développement ou d'un environnement de test
Revenez au sujet précédent.
Lorsque nous npm run servedémarrons habituellement , la NODE_ENVvaleur de la variable d'environnement de notre système local sera définie sur yes par défaut par webpack development.
À ce stade, nous l'imprimons dans le projet tel que main.js:
console.log(process.env.NODE_ENV)
Et lorsque nous exécutons npm run serve, il exécutera d'abord .env puis exécutera les deux fichiers .env.development.
Deuxièmement, lors du chargement des fichiers dans l'ordre, le Vuecontenu du prochain fichier chargé sera comparé au contenu du fichier précédemment chargé. S'il y a des variables avec le même nom, alors ce sera le cas 采用后一个文件里的变量值为变量的最终值. (Autrement dit, l'affectation de variable avant l'écrasement effectué plus tard)
Examinez les trois fichiers précédemment configurés. Si ce projet a été exécuté avec npm run serve, imprimez cette variable directement dans main.js:
Et lorsque nous le conditionnons sur le serveur (npm run build), la NODE_ENVvaleur du serveur est généralement production, alors Vue chargera toujours le .envfichier en premier , puis chargera le .env.productionfichier.
C'est à imprimer à ce moment:
console.log(process.env.NODE_ENV) //production