Vue配置环境变量的正确打开方式

目录
  • 第一 配置package.json
  • 第二 配置介绍 简单说明 看详情点击上面tps
  • 第三 在根目录新建文件
  • 第四
  • 第五
  • 总结:

第一 配置package.json

package.json 里的 scripts 配置 serve test build，通过 --mode xxx 来执行不同环境
通过 npm run serve 启动本地 , 执行 development
通过 npm run test 打包测试 , 执行 testing
通过 npm run build 打包正式 , 执行 production
"scripts": {
  "serve": "vue-cli-service serve --open",
  "test": "vue-cli-service build --mode testing",
  "build": "vue-cli-service build",
}

第二 配置介绍 简单说明 看详情点击上面tps

 以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。

 比如,VUE_APP_MY_NAME = '活在风浪' 通过process.env.VUE_APP_MY_NAME 访问。 

除了 VUE_APP_xxx 变量之外，在你的应用代码中始终存在两个默认变量NODE_ENV 和BASE_URL

第三 在根目录新建文件

  • .env.development 本地开发环境配置
  • 内容如下
NODE_ENV='development'
  • .env.staging 测试环境配置
NODE_ENV='production'
  • .env.production 正式环境配置
 NODE_ENV='production'

第四

文件已建立完毕,下一步该封装baseURL了,如果你封装了axios,在你的axios父文件夹中在新建一个baseURL.js里面写的是判断环境的代码

let baseURL = "";
if (process.env.NODE_ENV == "development") {
    // 开发环境  因为我这里写了配置跨域的重定路径所以是api
    baseURL = "/api";
} else if (process.env.NODE_ENV == "production") {
    // 正式环境
    baseURL = "https://www.baidu.com";
} else {
    // 测试环境
    baseURL = "https://www.ceshi.com";
}
export default baseURL;

第五

导出baseURL  在封装axsio的地方导入baseURL 将公共地址换成 baseURL变量 (baseURL变量就是写的环境判断)

使用不同的命令 请求的网址就不一样 如

//启动本地服务器
npm run serve
//启动打包命令
npm run build
//启动测试环境命令
npm run test

说一个细节:如果运行打包命令,dist中index.html直接打开是相对电脑盘符的

要使用一个插件 直接在vsc插件管理下载

总结:

先配置package.json 在新建需要文件 然后写判断环境代码

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • vue cli4下环境变量和模式示例详解

    本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con

  • vue项目环境变量配置的实现方法

    问题 实际开发中,开发环境和生产环境中一些变量是不同的,比如接口地址等等,打包之前需要手动切换. 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = 'https://xxxxxxxxx'; } else if (process.env.NODE_ENV == 'development') { baseUrl = '/api' } export { baseUrl } process

  • vue-cli4.0多环境配置变量与模式详解

    vue-cli4.0多环境配置变量与模式详解

    vue-cli2.x还是vue-cli4.x模式的多环境变量配置方法(忘了). 1.在package.json文件中 "scripts": { "dev": "cross-env APP_ENV=dev node build/dev-server.js", "devTH": "cross-env APP_ENV=tianhe node build/dev-server.js", "build:pr

  • vue-cli配置环境变量的方法

    vue-cli配置环境变量的方法

    在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常对这个都不陌生,用这个最多的基本就是我们配置ajax请求的域名头了, if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://

  • 深入浅析vue全局环境变量和模式

    我们可以在项目根目录中的下列文件来指定环境变量: .env                # 在所有的环境中被载入 .env.local          # 在所有的环境中被载入,但会被 git 忽略 .env.[mode]         # 只在指定的模式中被载入 .env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略 一个环境文件只包含环境变量的"键=值"对,并且必须以VUE_APP开始: FOO=bar     //无效 VUE_APP_SE

  • Vue配置环境变量的正确打开方式

    Vue配置环境变量的正确打开方式

    目录 第一 配置package.json 第二 配置介绍 简单说明 看详情点击上面tps 第三 在根目录新建文件 第四 第五 总结: 第一 配置package.json package.json 里的 scripts 配置 serve test build,通过 --mode xxx 来执行不同环境 通过 npm run serve 启动本地 , 执行 development 通过 npm run test 打包测试 , 执行 testing 通过 npm run build 打包正式 , 执行

  • vue cli4.0 如何配置环境变量

    vue cli4.0 如何配置环境变量

    目录 1.创建不同环境变量文件 2.给.env文件添加内容 3.在package.json中添加不同环境对应的执行语句 4.使用 温馨提示:本文只适用于vue-cli 3.0及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配置不同的环境变量呢? 为了更加方便消化本文章,建议先看下官方文档: 环境变量和模式 看完官方的文档如果还没有明白,可以参考本文. 在vue-cli构建的项目中,默认有3种模

  • CentOS安装jdk的几种方法及配置环境变量方式

    目录 一.下载jdk 二.安装jdk 安装jdk(介绍三种方法) 方法一:利用yum源来安装jdk(此方法不需要配置环境变量) 方法二:用rpm安装jdk(可以使用man rpm命令查看rpm的帮助文档) 方法三:手动解压JDK的压缩包,然后设置环境变量 总结 一.下载jdk jdk下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载jdk-8u152-linux-x

  • vue-cli + sass 的正确打开方式图文详解

    vue-cli + sass 的正确打开方式图文详解

    关于在vue-cli搭建的项目中怎么配置sass,网上搜到的基本是这种答案: 但是我认为,直接将样式写在每个单文件的<style>里,是十分不明智的做法.且不说node-sass安装过程的各种坑,内嵌的<style>也让组件显得十分混乱.想象一下你在修改某个methods时必须拖动滚轮穿越几十上百行的css代码,又或者为了修改一组样式,却找不到对应的css文件,因为它们散布在vue文件里... 在我看来,正确的做法应该是单独管理sass文件,然后在main.js中直接引入编译好的c

  • 详解 MAC/Linux Vi配置环境变量及Java环境变量配置

    详解 MAC/Linux Vi配置环境变量及Java环境变量配置 vi基础 1.vi的基本概念 (1)基本上vi可以分为三种状态,分别是命令模式(command mode).插入模式(Insert mode)和底行模式(last line mode),各模式的功能区分如下: 1) 命令行模式command mode) 控制屏幕光标的移动,字符.字或行的删除,移动复制某区段及进入Insert mode下,或者到 last line mode. 2) 插入模式(Insert mode) 只有在Ins

  • Linux CentOS 7.0中java安装与配置环境变量的步骤详解

    一.前言: CentOS7.0虽然自带JDK1.7和1.8,运行"java -version"命令也可以看到版本信息,但是jdk的安装环境不全,比如缺少tool.jar和dt.jar等,这就导致"javac"等这样的命令即便配置了环境变量也不能用,所以要重新安装jdk,并且配置环境变量,并解决"javac"命令不可用的问题. 下面话不多说了,来随着小编一起看看详细的介绍吧. 二.下载安装JDK 1.CentOS下,首先让当前用户获取root权限,

  • mysql 5.6.23 安装配置环境变量教程

    本文为大家分享了mysql 5.6.23 安装配置教程,供大家参考,具体内容如下 1 下载mysql 2 安装mysql 3 配置环境变量 打开我的电脑->属性->高级->环境变量,在系统变量里选择PATH,在其后面添加: 你的mysql bin文件夹的路径  如: 4 测试 出现上面的界面 说明配置成功了 也可以输入"net start mysql"启动mysq,出现上面界面说明启动成功了.然后输入"mysql -hlocalhost -uroot -pr

  • WIN10下的JDK安装与配置环境变量的过程(详细版)

    若学习JAVA,必须安装JDK(java development kit java开发工具包),并进行环境变量的配置后方可进行java的学习.经过几次配置环境变量失败后,我最终成功.通过对遇到的问题进行总结,形成这篇博文.欢迎交流.[当然,小白如我.]常见失败原因如下: 安装问题:将jdk与jre装在同一文件夹下,导致"jdk中的原文件"被覆盖.(出现javac指令错误.) 变量混淆:打开环境变量设置框后,有"用户变量"与"系统变量"两类,我们需

  • 云开发 VSCode 插件 Cloudbase Toolkit 的正确打开方式及应用场景分析

    什么是 Cloudbase Toolkit Tencent CloudBase Toolkit 是云开发的 VS Code(Visual Studio Code)插件.该插件可以让您更好地在本地进行云开发项目开发和代码调试,并且轻松将项目部署到云端. Cloudbase Toolkit 将项目创建.函数上传.函数更新.函数本地调试等功能集成在 VSCode 的本地调试环境中,开发者可以通过简单的点击,完成云函数的更新.上传.同步等功能. 和 Cloudbase Cli 相比,Cloudbase

  • 安装nvm并使用nvm安装nodejs及配置环境变量的全过程

    目录 一.安装nvm 环境变量配置: 验证nvm安装: 二.安装node 1.通过nvm安装node 2.node环境变量配置 三.安装Vue 1. 切换镜像源 2.查看当前镜像下包源 npm config get registry 3.安装vue.vue-cli.webpack 总结 一.安装nvm 1.下载nvm 解压后点击exe文件进行安装: 2.点击下一步安装到 D:\NVM 下 3.先在D:\NVM 下创建nodejs文件夹,然后将路径设置如下: 4.点击next 一直点击 完成安装:

随机推荐