vue环境变量你知道吗？浅谈vue-cli环境变量的使用

slowCoder

已于 2023-12-14 17:57:49 修改

阅读量2.1k

点赞数 3

分类专栏：笔记文章标签： vue.js webpack javascript

于 2022-01-16 17:08:06 首次发布

本文链接：https://blog.csdn.net/weixin_45131389/article/details/122525343

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

环境变量

mode

首先要了解webpack的配置 mode 选项

mode 的值有三个 string = ‘production’: ‘none’ | ‘development’ | ‘production’

没有设置默认为 ‘production’

tip: 如果 mode 未通过配置或 CLI 赋值，CLI 将使用可能有效的 NODE_ENV 值作为 mode

process.env

使用频率很高，node服务运行时，时常会判断当前服务运行的环境：

一般情况下，我们需要针对不同环境（开发环境、测试环境、生产环境…），进行相应策略的打包

（比如是否替换接口地址BaseURL，代码是否压缩, 是否保留console）。

webpack就是通过process.env属性加以区分。

这里附一张官网的说明：

在这里插入图片描述

webpack.DefinePlugin的具体配置感兴趣的小伙伴可以去研究一下

具体 vue脚手架的环境变量使用

vue脚手架做了很多封装，有些webpack的配置都已经内置了，这里不细谈，只说使用

1 可以在项目根目录下新建或修改以下文件：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

2 你可以通过传递 --mode 选项参数执行脚本来覆写默认的模式。

例如:

在package.json文件的 script 写入

"build:dev": "vue-cli-service build --mode development"

这样就可以打包一个开发环境的包出来

如何自定义一些变量呢？

3 自定义环境变量 key = value

新建文件 .env.development

写入：

# just a flag
ENV = development

# base api
VUE_APP_BASE_API = http://localhost:8000/

新建文件 .env.production

写入：

# just a flag
ENV = production

# base api
VUE_APP_BASE_API = http://localhost:6000/

这样你就会出现两个不同环境配置的文件

里面的变量如果使用了，将会在项目构建时替换对应的引用地方

通过 process.env.VUE_APP_BASE_API 的方式使用

例如，我想要在vue.config.js中动态设置反向代理

vue.config.js 写入:

devServer: {
    proxy: { // 反向代理
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        pathRewrite: {
          '^/api': ''
        },
        logLevel: 'debug', // 可以在终端窗口看到真实代理地址 
      }
    }
  }