.env前端配置多环境打包

待我称王封你为后i 2022-09-11 05:28 202阅读 0赞

## .env前端环境变量配置 ##

> 参考资料：  
> `https://www.cnblogs.com/xiaohouzi6/p/14445570.html`  
> `https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F`

--------------------

> 项目有开发环境、测试环境、线上环境，里面的接口域名等是不同的。每次调试或者打包的时候手动改动各个变量，比较麻烦，也容易出错，所以用自动化方式直接配置的不同的环境变量。

### 文件配置 ###

> 在`项目根目录`下添加文件，并配置变量

`.env.dev`（本地环境变量）

NODE_ENV = 'development'
    VUE_APP_ENV_DESC = '测试环境'
    VUE_APP_PUBLICPATH = ''
    VUE_APP_HOST1 = 'http://dev.xxx.com'
    VUE_APP_HOST2 = 'http://dev.xxx.com'

`.env.prod`（线上环境变量)

NODE_ENV = 'production'
    VUE_APP_ENV_DESC = '生产环境'
    VUE_APP_PUBLICPATH = ''
    VUE_APP_HOST1 = 'http://dev.xxx.com'
    VUE_APP_HOST2 = 'http://dev.xxx.com'

### 启动配置 ###

> 在`package.json`中配置scripts

"scripts": { 
        "serve:dev": "vue-cli-service serve --mode dev",
        "serve:prod": "vue-cli-service serve --mode prod",
        "build:dev": "vue-cli-service build --mode dev",
        "build:prod": "vue-cli-service build --mode prod"
      }

### 项目中使用 ###

// 例如：获取文件中的变量
    console.log(process.env.NODE_ENV)

### 运行打包 ###

> 开发环境为例

npm run serve:dev  // 启动项目
    
    npm run build:dev // 打包项目

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview-admin多环境配置打包(TODO)

一、简介使用的iview-admin前端UI框架，要分环境进行打包部署，本文主要讲解部署步骤。参考链接： [...

迈不过友情╰/ 2024年04月17日 06:05/ 0 赞/ 35 阅读

相关 thinkphp环境变量.env配置

打开网站根目录www/tp5/ 新建 .env 打开.env 书写变量配置(不能使用中文): 书写格式 name=Lee age=12 \[array\]

阳光穿透心脏的1/2处/ 2023年10月18日 19:11/ 0 赞/ 69 阅读

相关多环境打包

1、vue-cli3 在根目录创建 .env.development(开发环境) NODE_ENV = development .env.pr

今天药忘吃喽~/ 2023年01月02日 03:19/ 0 赞/ 158 阅读

相关开发环境 process.env.NODE_ENV

process.env.NODE\_ENV 的作用通过判断这个变量区分开发环境或生产环境。 > process对象是全局变量，它提供当前node.js的有关信息，以及

﹏ヽ暗。殇╰゛Y/ 2022年12月11日 15:30/ 0 赞/ 110 阅读

相关前端区分打包环境

一、安装cross-env cnpm install --save-dev cross-env 通过cross-env这个插件我们能够跨平台设置环境变量.那么我们怎

素颜马尾好姑娘i/ 2022年09月14日 03:07/ 0 赞/ 168 阅读

相关 .env前端配置多环境打包

.env前端环境变量配置 > 参考资料： > `https://www.cnblogs.com/xiaohouzi6/p/14445570.html` > `ht

待我称王封你为后i/ 2022年09月11日 05:28/ 0 赞/ 203 阅读

相关 Eclipse+maven多环境，每个环境多配置打包

公司现在项目都是用的ant脚本打的war包，不过经理觉得现在都是用的maven,或者是gradle会更好,ant那个东西太古董了，让我考虑下业余时间给

向右看齐/ 2022年06月09日 00:10/ 0 赞/ 349 阅读

相关 thinkphp环境变量.env配置

打开网站根目录www/tp5/ 新建 .env 打开.env 书写变量配置(不能使用中文): 书写格式 name=Lee age=12

╰半夏微凉°/ 2022年05月28日 07:15/ 0 赞/ 569 阅读

相关 umi 配置多环境打包

平时我们开发应用时环境有开发环境、测试环境、生产环境等,此时我们需要配置不同的环境,获取不同的apiUrl前缀，以满足日常开发需要。 1.安装 cross-env 插件

亦凉/ 2022年03月02日 08:14/ 0 赞/ 805 阅读

相关 vue pc 项目多环境配置(.env)

没接触多环境配置前，感觉好高大上，真正操作后感觉也就那么回事，在此把自己遇到的问题和解决方案叙述一下，有不对的地方欢迎各位大佬指出。什么是多环境配置,为什么要多环境配置?

╰+哭是因爲堅強的太久メ/ 2021年07月26日 02:38/ 0 赞/ 416 阅读