.env前端配置多环境打包

待我称王封你为后i 2022-09-11 05:28 263阅读 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 条评论，263人围观）

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

相关阅读

相关 thinkphp环境变量.env配置

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

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

相关 vue脚手架项目使用cross-env分环境打包

一般的实现方式 //常规的做法 let mode="dev"; //可以设置：dev、test、prod let baseUrl="";

红太狼/ 2023年06月30日 12:52/ 0 赞/ 11 阅读

相关 springboot maven 多环境打包配置

打包的时候先勾选右侧的环境变量选项，再打包 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

你的名字/ 2023年02月24日 03:56/ 0 赞/ 13 阅读

相关多环境打包

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

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

相关前端区分打包环境

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

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

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

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

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

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

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

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

相关 thinkphp环境变量.env配置

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

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

相关 umi 配置多环境打包

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

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

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

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

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