.env .env.development .env.production 配置说明

安装 vue-cli

npm install -g @vue/cli

创建项目

vue create envtest

启动项目

npm run serve

根目录下创建 .env .env.development .env.production 3个文件

文件说明

.env 无论开发环境还是生产环境都会加载的配置文件 .env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件

文件目录

.env 文件

NODE_ENV = development
VUE_APP_URL = 'development'

.env.development 文件

NODE_ENV = development
VUE_APP_URL = 'development'

.env.production 文件

NODE_ENV = development
VUE_APP_URL = 'production'

文件说明

这里是引用
自定义的变量以 VUE_APP 开头

访问配置文件变量

 data(){
    return {
      url:process.env.VUE_APP_URL
    }
  },
  mounted() {
    console.log('环境变量',this.url)
  },

本地启动

npm run serve

打印日志

环境变量 development

本地打包部署
采用serve在本地模拟部署
全局安装 serve

npm i serve -g

在各个项目的根目录下启动 serve

serve ./dist -p port
举例子
serve ./dist -p 8000

打印日志

环境变量 production

结果说明

研发环境默认加载 .env.development 文件
生产环境默认加载 .env.production 文件

其他配置

.env.test

NODE_ENV = development
VUE_APP_URL = 'test'

加载对应文件方式

package 配置
– mode 表示加载对应的配置文件

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:test": "vue-cli-service serve --mode test"

启动方式

npm run serve:test

打印日志

环境变量,test

疑惑解答

• 为什么我们本地启加载 .env.development 服务器加载 .env.production

比如我们平常通过npm run serve启动时，我们本地系统的环境变量NODE_ENV
值默认是development，这时就会先后加载.env和.env.development这两个文件。
而当我们打包到服务器后，服务器的NODE_ENV值一般为production，则此时Vue仍会先加载.env文件，然后加载.env.production文件。

• 变量覆盖问题 加载顺序问题

研发环境 加载顺序
.env
.env.development
同一个变量名 后者会覆盖前者

生产环境 加载顺序
.env
.env.production
同一个变量名 后者会覆盖前者

我是菜鸟～谢谢关注