VUE3中，使用.env.development和.env.production

在实际项目开发过程中，可能开发环境和生产（测试）环境不一样，经常需要修改配置常量，才能满足对应的环境，才能使软件运行起来。在vue3中可以使用2个文件进行区分。

.env.development：开发环境

.env.production：生产（测试）环境

1.首先使用HBuilder X建立一个VUE3项目，并且能跑起来

2.分别建立2个文件，必须以VITE_开头，否则无法识别，如图所示

3.然后在使用的地方加上如下命令

import.meta.env.VITE_TEST

4.重新启动服务器，一定要重新启动服务器，否则无效

打开浏览器，我们可以看到输出了开发环境。

5.选择build，生成生产模式，程序就在dist中

6.此时，我这里使用nginx进行发布，当然你也可以使用别的发布网址，比如IIS等等。

nginx的配置，之前文档已经介绍了，这里不再说明。

Windows中使用nginx部署网站_故里2130的博客-CSDN博客_nginx部署网站

部署完成后，直接打开，我这里是808端口。

打开浏览器，我们可以看到输出了生产环境。

拓展：

打包后，自定义IP地址。

1.打包前，在项目的根目录中，创建config.js

const CONF={baseUrl1:'http://127.0.0.1:8888'
}

2.在index.html中调用

3. 然后在axios中调用

4.打包后，之前的config.js就没有了，复制所有的打包文件。

5.创建config.js，把之前写的再写一次

6.把index.html中的路径修改一下

VUE3中，使用.env.development和.env.production相关推荐

env.development 和 .env.production环境文件 process.env属性
模式模式是 Vue CLI 项目中一个重要的概念.默认情况下,一个 Vue CLI 项目有三个模式: 开发,测试,生产 development 模式用于 vue-cli-service serve ...
vue中的.env | .env.development | .env.production的使用
.env--全局默认配置文件,无论什么环境都会加载合并 .env.development--开发环境下的配置文件 .env.production--生产环境下的配置文件注意:属性名必须以VUE_AP ...
Vue2 中 .env.development .env.production 详细说明
简介 Vue CLI 项目中一个重要的概念.默认情况下,一个 Vue CLI 项目有三个模式: development 模式用于 vue-cli-service serve production ...
vue中 .env .env.development .env.production 详细说明
1.配置文件有: .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 2.命名规则: 属 ...
Vue中.env|.env.development|.env.production文件说明
0.介绍模式是Vue CLI项目中一个重要的概念,默认情况下,一个Vue CLI项目有三种模式: developemt 模式用于vue-cli-service serve test 模式用于vue- ...
vue中有关.env；.env.development,.env.production的相关介绍
1,关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env. ...
Vue项目 .env .env.development .env.production 配置说明
1.模式模式是 Vue CLI 项目中一个重要的概念.默认情况下,一个 Vue CLI 项目有三个模式: development 模式用于 vue-cli-service serve product ...
vue配置生产环境.env.production、测试环境.env.development
静下来慢慢看首先我们需要搭建一个项目依赖包会自动下载好无需自己 npm i .env 无论什么环境都会加载 .env.production 生产环境加载 .env.development 测 ...
.env .env.development .env.production 配置说明
.env .env.development .env.production 配置说明安装 vue-cli npm install -g @vue/cli 创建项目 vue create envtes ...

VUE3中，使用.env.development和.env.production

VUE3中，使用.env.development和.env.production相关推荐

最新文章

热门文章