精华内容
下载资源
问答
  • vue2项目配置环境变量
    2022-04-18 18:46:26

    一、环境变量干啥用的

    我们学习它肯定就是要用它,说个最常用的例子吧,我们请求的地址在开发线、测试线、和正式线中,肯定是不一样的所以每次打包之前去改就显得很麻烦,它就是用来干这个的帮我们解决这个问题。废话少说,立马开干

    二、配置环境变量

    首先我们需要在项目根目录下创建你所需要的环境变量名字为.env.xxxx,前面.env是固定的后面可以自定义,这里我定义了三个

    • .env.development 开发
    • .env.test 测试
    • .env.production 生产

    三、定义变量

    只有VUE_APP开头的变量和NODE_ENV和BASE_URL才有效哦,所以我定义了如下变量;

    .env.development文件
    NODE_ENV=development
    VUE_APP_BASE_URL="http://dev"
    
    .env.test文件
    NODE_ENV=test
    VUE_APP_BASE_URL="https://test"
    
    .env.production文件
    NODE_ENV=production
    VUE_APP_BASE_URL="https://prod"
    

    四、使用

    我们定义好了变量在哪里使用呢,在js文件中,这样来使用,这里我们已axios配置举个例子

    import axios from "axios";
    const request = axios.create({
        baseURL: process.env.VUE_APP_BASE_URL, //这就是我们定义好的变量啦
        timeout: 5000
    })
    export default request;
    

    然后在我们的package.json里面添加如下代码

    "scripts": {
        "dev": "vue-cli-service serve --mode development",
        "test": "vue-cli-service serve --mode test",
        "pro": "vue-cli-service serve --mode production",
        "build": "vue-cli-service build",
        "build:test": "vue-cli-service build --mode test"
      },
    

    然后我们只需要运行npm run build:test就可以轻松打包test模式的变量啦,build的话默认会使用production环境变量。

    更多相关内容
  • vue项目配置环境变量

    2020-10-27 10:42:20
    配置环境变量官方文档 配置环境变量的两种方式 一、通过.env文件配置环境变量 1.在根目录创建.env文件并创建变量 环境变量的命名必须是:VUE_APP_XXX 环境变量声明方式:“键=值”对 2.配置文件作用范围 3.配置...

    配置环境变量官方文档

    配置环境变量的三种方式

    一、通过默认文件来指定环境变量

    优缺点:自动使用,不会覆盖默认环境变量

    1.配置文件作用范围及命名

    本地运行:.env.development
    生产环境:.env.production
    测试:.env.test
    在这里插入图片描述
    在这里插入图片描述

    二、通过.env文件配置环境变量

    优缺点:可以自己通过package.json自定义使用那个环境变量配置文件。

    1.在根目录创建.env文件并创建变量

    环境变量的命名必须是:VUE_APP_XXX
    环境变量声明方式:“键=值”对
    在这里插入图片描述

    3.配置配置文件在这里插入图片描述

    三、在vue.config.js中直接声明环境变量

    优缺点:不用单独在package.json中配置环境变量,随用随声明。但是当serve和build使用的变量不同时,需要频繁改动。
    在这里插入图片描述

    环境变量使用

    1.html中使用环境变量

    在这里插入图片描述

    2.组件中使用环境变量

    //...
    mounted() {
    	alert(process.env.VUE_APP_STATIC_URL)
    }
    //...
    
    展开全文
  • 实际开发中,开发环境和生产环境中一些变量是不同的,比如接口地址等等,打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = '...
  • 由于项目要求 部署不同的环境及目录,为了方便打包与部署,配置不同的开发环境变量与部署路径

    由于项目要求 部署不同的环境及目录,为了方便打包与部署,配置不同的开发环境变量与部署路径

    1.创建项目

    vue create demo
    cd demo
    npm run serve  //运行项目
    

    2.在项目目录创建不同的环境文件 NODE_ENV = production声明开发环境,若不声明打包后的内容是 1.js… 没有混淆
    .env.dev //开发环境

    NODE_ENV = development
    VUE_APP_BASE_API = https://www.development.com.cn //具体变量以实际项目为准
    

    .env.test //测试环境

    NODE_ENV = test
    VUE_APP_BASE_API = https://www.test.com.cn //具体变量以实际项目为准
    

    .env.pro //正式环境

    NODE_ENV = production
    VUE_APP_BASE_API =  https://www.production.com.cn //具体变量以实际项目为准
    

    如果有需要配置多行变量,需以VUE_APP 开头

    3.修改package.json文件中的scripts
    原配置

    "scripts": {
        "serve": "vue-cli-service serve",  //项目开发环境运行
        "build": "vue-cli-service build"  //项目打包
      },
    

    修改配置

    "scripts": {
            "serve": "vue-cli-service serve  --mode dev",  //运行开发环境 
            "dev": "vue-cli-service serve --mode dev", //运行开发环境
            "test": "vue-cli-service serve --mode test",  //运行测试环境
            "build": "vue-cli-service build --mode prod",  //打包正式环境
            "build:test": "vue-cli-service build --mode test", //打包测试环境
        },
    

    重点 --mode后面的变量与文件.env.后面dev/test/prod相对应要一致

    4.重启项目查看
    a.启动开发环境

     npm run dev 
    

    在这里插入图片描述
    5.定义不同环境下的路由路径和打包路径
    测试环境 需要部署到 /test 非根目录
    创建vue.config.js
    module.exports = {
    publicPath: ‘/test/’ //直接配置
    }
    运行项目

    npm run test
    

    在这里插入图片描述
    在这里插入图片描述
    6.路由非根目录的配置

    const router = new VueRouter({
      mode: 'history',
      base: process.env.NODE_ENV=='test'?'/test':'', // 也可配置process.env.BASE_URL
      routes
    })
    
    展开全文
  • node.js环境变量使用

    node.js 提供了环境变量,这个变量全局的,下面看看怎么用:
    找到package.json 文件,在script一项里面你会看到这些东西
    在这里插入图片描述
    这些东西就是你的项目要运行的命令,比如你要运行dev环境

    npm run dev
    

    此时执行的是 “dev”: “cross-env NODE_ENV=development vue-cli-service serve --open” 这条指令
    那么 NODE_ENV就是你设置的环境变量,这里面你还可以加BASE_URL……随便加,那么加了我们通过node下的 process.env的对象来获取我们的环境变量

    const NODE_ENV = process.env.NODE_ENV
    const BASE_URL= process.env.BASE_URL
    

    对了要用环境变量最好装一个cross-env的插件,这个是方便window和mac用同样的方法获取环境变量

    npm install cross-env
    

    这里有个小问题,我在设置BASE_URL时,我把IP地址写进去,发现ip地址被截取掉了,不知道咋回事,希望大佬指教

    展开全文
  • .env.development 是开发环境下的配置文件 .env.production 是生产环境下的配置文件 如果这两个文件是空的,那么运行 npm run serve 时,process.env.NODE_ENV 的值默认就是 development;运行 npm run build 时,...
  • 在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常...
  • Vue2配置环境变量

    2022-03-10 10:12:25
    接下来带着大家如何去配置和使用这个环境变量 Vue2官网:Vue.js 一、首先我们在项目全局目录下创建两个 .env 文件夹,文件分别为 .env.production 生产模式和 .env.development 开发模式 二、在文件里面...
  • 通过为 .env 文件增加后缀来设置某个模式下特有的环境变量 通过传递 --mode 选项参数为命令行覆写默认的模式 在项目的根目录新建3个文件夹,分别对应开发(dev),测试(test),生产(prod) 文件命名: .env.dev ,...
  • 主要介绍了vue项目使用.env文件配置全局环境变量的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue项目配置环境变量 此篇文章是在网上看到的,项目中我采用的是第二种方式,此文章出处. 1.环境背景 项目环境一般分为开发环境,测试环境,线上环境 因为每个环境的接口域名、webpack 配置都是不同的,所以在打包...
  • 使用方法二配置环境变量步骤如下: 步骤一:根目录下创建dev.env.js文件、prod.env.js文件、test.env.js文件以及index.js文件 步骤二:配置各文件 index.js dev.env.js test.env.js prod...
  • Vue中多环境变量配置

    2021-12-28 11:17:52
    我们在vue项目开发中,项目在运行时会根据启动的指令来运行不同的环境,在不同的环境中,我们配置对应所需的变量来满足我们的开发需求,称为多环境变量
  • 目的:为了方便Vue项目能够在多环境(不同的Url地址)下运行,而又不想去重新打包或者修改代码,可以进行多环境配置实现。
  • 1.项目新建配置文件 根目录下创建文件 1..env.development (开发环境配置) NODE_ENV = 'development' VUE_APP_DEPLOY = 'development' 2..env.production (生产环境配置) NODE_ENV = 'production' VUE_APP_...
  • vue项目设置环境变量

    2020-03-20 16:43:25
    一.vue-cli3构建的项目(以测试环境为例) 环境变量官方入口 1.在根目录创建.env.test文件, .env.[mode] # 只在指定的模式中被载入 如图: 内容如下: VUE_APP_xx 自定义的变量,NODE_ENV - 会是 “development”、...
  • 1、根目录下新建文件:.env.development(开发环境)、....# 开发环境配置 ENV = 'development' # 查询/开发环境 VUE_APP_BASE_API = '/dev-api' # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_MODULES = true .env.produ
  • vue项目根目录下新建配置文件 .env.dev NODE_ENV="development" BASE_URL="/admin" VUE_APP_UPLOAD_URL='http://y.yy.com:8080' VUE_APP_LOGIN='false' .env.prod NODE_ENV="production" BASE_URL="/" VUE_APP_...
  • VUE_APP_ICON = './favicon.png' //vue项目配置环境必须用VUE_APP开头 package.json: "build:dev": "vue-cli-service build --mode development", "build:cr14hz": "vue-cli-service build --mode cr14hz", "b
  • vue配置环境变量

    2022-01-04 00:09:30
    项目在运行时会根据启动的指令来运行不同的环境,在不同的环境中,我们配置对应所需的变量来满足我们的开发需求,称为多环境变量。 环境一般分为开发环境 测试环境 生产环境 配置流程 在项目根目录下的package....
  • vue 配置环境变量 启动项目

    千次阅读 2019-01-24 18:08:54
    下载安装node.js  ... 安装node.js 测试node.js安装是否成功 cmd ①node -v ②npm -v ...cnpm install vue-cli -g 运行项目  ①cd 项目地址/ 项目名称 ②npm install  ③npm run dev
  • vue-cli配置环境变量

    2020-11-09 18:50:11
    vue-cli配置环境变量项目根目录创建.env文件修改package.json命令行,加上--mode xxx项目中获取环境变量 项目根目录创建.env文件 ①.env.dev NODE_ENV=development ②.env.uat NODE_ENV=uat ③.env.sit NODE_ENV=...
  • vue3 + vite 环境变量配置

    千次阅读 2022-01-29 16:09:38
    1、设置开发环境启动命令使用的环境变量 “dev”: “vite --mode development”, 在package.json文件中: { "name": "test", "version": "0.0.0", "scripts": { "dev": "vite --mode development", "build": ...
  • win10安装node.js和vue配置环境变量

    千次阅读 2020-06-07 15:21:18
    使用命令npm config get registry查看镜像 使用npm info vue查看Vue模块信息 配置环境变量 在系统变量中新增NODE_PATH D:\Program Files\nodejs\node_global 在系统变量中的Path中新增D:\Program Files\nodejs\node_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,091
精华内容 10,836
关键字:

vue项目配置环境变量