在根目录下创建两个文件,这样的好处在于不用手动去书写判断环境替换路径代码

.env.development(开发)

.env.production(生产)

内容:

必须是VUE_APP前缀开头,这样webpack可以运行或者打包时候,会将其集成到process.env中

如:

 1 // .env.development中 地址都是瞎写的
2 VUE_APP_BASE_URL = '192.168.0.0:8080'
3
4
5 // .env.production中
6 VUE_APP_BASE_URL = '192.168.0.1'
7
8
9
10 // 在实际请求中,只需要写入一个url
11 // 如:
12 axios.get(`${process.env.VUE_APP_BASE_URL}`/api)
13
14
15 // 在进行开发环境,会使用development中的地址
16 // 打包生产使用production中的地址。

回炉重造中,共勉!

vue-cli3生产环境和开发环境路径的替换的更多相关文章

  1. (17/24) webpack实战技巧:生产环境和开发环境并行设置,实现来回切换

    1. 概述 生产环境和开发环境所需依赖是不同: --开发依赖:就是开发中用到而发布时用不到的.在package.json里面对应的就是devDependencies下面相关配置. --生产依赖: 就是 ...

  2. 从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发的项目

    项目简介:该项目是基于日常计算宿舍水电煤气费的需求写的,旨在从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发,使用webpack进行代码的编译.压缩和打包,并疏通 ...

  3. Maven Filter与Profile隔离生产环境与开发环境

    Maven Filter与Profile隔离生产环境与开发环境 在不同的开发阶段,我们一般用到不同的环境,开发阶段使用开发环境的一套东西,测试环境使用测试环境的东西,可能有多个测试环境,生产环境使用的 ...

  4. 【webpack学习笔记】a06-生产环境和开发环境配置

    生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后 ...

  5. 通过Maven配置测试环境和开发环境连接不同的数据库

    通过Maven配置测试环境和开发环境连接不同的数据库   作者及来源: 通灵宝玉 - 博客园    收藏到→_→: 此文来自: 马开东博客 网址:http://www.makaidong.com   ...

  6. Android 程序分析环境搭建-开发环境搭建

    1.1  JDK 安装 JDK 的配置,初学java 开发,那是必须会的. 下载,遇到的问题就是要注册oracle 的账号,还有你要下载特定版本,比如jdk 1.7,jdk 1.6,很难找到在哪里.解 ...

  7. VUE依赖webpack分别给开发环境和生产环境配置不同的常量值并在项目中动态引用

    当在开发和产品上线的时候,我们经常会遇到在同一个地方由于环境的不同而地址也不同的情况,这时候如果在代码中将该地址写死,那势必会造成上线时手动改动,多人开发及多处使用该地址难以维护等一系列问题,为避免这 ...

  8. vue中使用axios给生产环境和开发环境配置不同的baseUrl

    第一步:设置不同的接口地址 找到文件:/config/dev.env.js 代码修改为: var merge = require('webpack-merge') var prodEnv = requ ...

  9. https://www.cnblogs.com/beileixinqing/p/7724779.html vue-cli生成的项目配置开发和生产环境不同的接口 vue-cli生成的项目,vue项目配置了不同开发环境的接口地址,axios.defaults.baseURL如何引用这个地址,这是在我发布项目的时候考虑的,于是想到了

    方法二:(集热心网友提供的方案) 一般项目webpack会有两个或多个配置文件,如: webpack.prod.conf.js 对应线上打包 webpack.dev.conf.js 对应开发环境 使用 ...

随机推荐

  1. JDK动态代理学习心得

    JDK动态代理是代理模式的一种实现方式,其只能代理接口.应用甚为广泛,比如我们的Spring的AOP底层就有涉及到JDK动态代理(此处后面可能会分享) 1.首先来说一下原生的JDK动态代理如何实现: ...

  2. ch4inrulz: 1.0.1靶机渗透

    ch4inrulz: 1.0.1靶机渗透 扫描主机端口,还行啦四个开放的端口,8011和80端口都运行着web服务. 80端口下的robots.txt告诉我们什么都没有 在8011端口的apache服 ...

  3. 简单聊聊 Ironic

    上一篇文章里我简单介绍了一下「裸金属」的概念,提到了 OpenStack 中的核心项目 Ironic,今天简单来聊聊它. Ironic 项目的吉祥物 Bare Metal 所以用 Bear 来做吉祥物 ...

  4. HTTP协议学习之Request学习

    在开始前,我们首先对HTTP协议做个简单的了解 HTTP协议(Hyper Text Transfer Protocol) 超文本传输协议 名词非常的高大上,如果学过计算机网络这门课(再如果还有一点印象 ...

  5. 普转提Day1

    T1 给定一个长度为N的序列,去掉其中连续的一部分使得剩下的部分没有重复元素. 很显然可以发现去掉的一部分只有三种情况:开头.中间.最后. 那么我们只需要枚举Hash就可以了.复杂度O(N^2). 不 ...

  6. mac电脑,charles,安卓手机如何配置代理,以及配置代理之后无法上网。已解决

    设备: 电脑:mac book pro 手机:小米10 charles:4.5.6 方法一: 步骤: 首先确保电脑,手机在同一局域网, 1. charles设置代理:proxy -> proxy ...

  7. IDEA 2020.2 最新激活教程,有效期到2089年!

    这段时间众多粉丝私信说需要IDEA 2020.2 最新激活教程,于是!他来了他带着最新激活教程来了. 注意: 本教程适用于 JetBrains 全系列产品 IDEA 2020.2 以下所有版本,请放心 ...

  8. 登陆页跳出iframe

    1 if(top.location.href != location.href){ 2 top.location.href = location.href; 3 }

  9. Shiro入门学习---使用自定义Realm完成认证|练气中期

    写在前面 在上一篇文章<shiro认证流程源码分析--练气初期>当中,我们简单分析了一下shiro的认证流程.不难发现,如果我们需要使用其他数据源的信息完成认证操作,我们需要自定义Real ...

  10. 二进制搭建kubernetes-1.18.6单master集群

    master组件 kube-apiserver kubernetes API集群的同一入口,各组件协调者,以RESTful API提供接口服务,所有对象资源的增删改查和监听操作都交给APIserver ...