Vue 设置环境变量和模式

谁借莪１个温暖的怀抱￠ 2022-12-14 12:27 132阅读 0赞

在项目的根目录下新建两个文件：

*  `.env.dev`
 *  `.env.prod`  
    ![20201013181014199.png_pic_center][]

文件内容如下：

开发环境：

NODE_ENV=development
    VUE_APP_SERVER=http://127.0.0.1:9000

生产环境：

NODE_ENV=production
    VUE_APP_SERVER=http://127.0.0.1:9000

在 `main.js` 中打印一下看看：

console.log("环境: ", process.env.NODE_ENV);

![20201013181907868.png_pic_center][]

在请求的时候可以调用系统环境作为请求路径：

process.env.VUE_APP_SERVER + '/business/admin/chapter/save'

## 启动脚本 ##

我们可以通过设置参数的方式改变启动的配置文件：

vue-cli-service serve --mode dev

在 `package.json` 中设置：

{ 
      "name": "admin",
      "version": "0.1.0",
      "private": true,
      "scripts": { 
        "serve-dev": "vue-cli-service serve --mode dev",
        "serve-prod": "vue-cli-service serve --mode prod",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      ...

在编辑器中就能看到这几个启动脚本：

![20201013180819728.png_pic_center][]

[20201013181014199.png_pic_center]: /images/20221123/8822c8f41e614bfaa23021d4b4306cbf.png
[20201013181907868.png_pic_center]: /images/20221123/554a23c29d274cd6a9aa6d600fed3a1f.png
[20201013180819728.png_pic_center]: /images/20221123/d84aa3f3481c40669e9fef2957b96c43.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue CLI 环境变量和模式

**什么是Vue CLI 环境变量和模式？** ** [官方介绍][Link 1] ** ** 环境（模式）：** ** ...

水深无声/ 2024年04月17日 23:04/ 0 赞/ 31 阅读

相关 @vue/cli3--多环境配置(模式和环境变量)--使用/实例

原文网址：[@vue/cli3--多环境配置(模式和环境变量)--使用/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_--_IT_-CSDN] 简介

蔚落/ 2023年09月28日 11:07/ 0 赞/ 15 阅读

相关 java设置系统环境变量_设置java 环境变量

DOS下任意目录用JAVA,JAVAC肯定是显示正确咯,因为你设置好了JAVAlib和bin的但是JAVA文件需要DOS下CD好了目录才能JAVAC否则是在C:\\progra

朴灿烈づ我的快乐病毒、/ 2023年09月24日 06:11/ 0 赞/ 167 阅读

相关 vue-cli模式和环境变量

默认情况下，一个 Vue CLI 项目有三个模式： development 模式用于 vue-cli-service serve test 模式用于 vue-cl

快来打我*/ 2023年01月17日 08:45/ 0 赞/ 53 阅读

相关 Vue 设置环境变量和模式

在项目的根目录下新建两个文件： `.env.dev` `.env.prod` ![20201013181014199.png_pic_center][

谁借莪１个温暖的怀抱￠/ 2022年12月14日 12:27/ 0 赞/ 133 阅读

相关 java环境变量设置图解_java环境变量设置方法

java环境变量设置方法 windows xp下配置JDK环境变量：(windows7 类似) 1、安装JDK，安装过程中可以自定义安装目录等信息，例如我们选择

柔光的暖阳◎/ 2022年11月03日 05:23/ 0 赞/ 265 阅读

相关 Vue CLI 模式和环境变量

模式默认情况下，一个 Vue CLI 项目有三个模式： `development` 模式用于 `vue-cli-service serve` `produ

素颜马尾好姑娘i/ 2022年09月04日 07:59/ 0 赞/ 5 阅读

相关 Ubuntu 设置环境变量

概述 Linux 系统包含两类环境变量：系统环境变量和用户环境变量。系统环境变量对所有系统用户都有效，用户环境变量仅仅对当前的用户有效。以下是在 Ubuntu 12.04

分手后的思念是犯贱/ 2022年08月06日 07:23/ 0 赞/ 321 阅读

相关 Mac 设置环境变量查看和添加PATH环境变量

原文：http://elf8848.iteye.com/blog/1582137 一、Mac 启动加载文件位置（可设置环境变量） \----

朱雀/ 2022年03月20日 02:06/ 0 赞/ 681 阅读

相关 vue2+koa2项目设置环境变量（开发环境/生产环境）

Windows中设置环境变量： set NODE_ENV=production Linux中设置环境变量： export NODE_ENV=produc

た入场券/ 2021年07月26日 00:48/ 0 赞/ 1020 阅读