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

.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. python的多种魔术方法

    目录 new str & repr iter getitem.setitem.delitem getattr.setattr.delattr call slots 定制类和魔法方法 new s ...

  2. 立下flag!

    从今日(2020年6月29日)开始,直到两个月的暑假结束2020年8月31日,每天vp一场div3,至少要ac4道题目.

  3. linux学习(八)切换用户模式常用命令

    一.常用的切换用户命令 sudo 暂时切换到超级用户模式以执行超级用户权限,以系统管理者的身份执行指令,一般用在给命令提高权限. 经由 sudo 所执行的指令就好像是 root 亲自执行.默认为一次时 ...

  4. 从四个问题透析Linux下C++编译&链接

    摘要:编译&链接对C&C++程序员既熟悉又陌生,熟悉在于每份代码都要经历编译&链接过程,陌生在于大部分人并不会刻意关注编译&链接的原理.本文通过开发过程中碰到的四个典型 ...

  5. spring cloud gateway(三、实现限流)

    限流一般有两个实现方式,令牌桶和漏桶 金牌桶是初始化令牌(容器)的个数,通过拿走里边的令牌就能通过, 没有令牌不能报错,可以设置向容器中增加令牌的速度和最大个数 漏桶是向里边放入请求,当请求数量达到最 ...

  6. Centos-帮助信息-man help

    man help 获取指定命令帮助信息 man cmd 获取命令详细帮帮文档 cmd --help 获取简洁命令详情

  7. Python练习题 019:求分数序列之和

    [Python练习题 019] 有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这个数列的前20项之和. --------------------------------- ...

  8. 090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 04 使用包进行类管理(2)——导入包

    090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  9. C语言&C++ 中External dependencies

    参考:https://blog.csdn.net/yyyzlf/article/details/4419593 External   Dependencies是说你没有把这个文件加入到这个工程中,但是 ...

  10. Arduino 串行外设接口——W3Cschool

    来源:https://www.w3cschool.cn/arduino/arduino_serial_peripheral_interface.html Arduino 串行外设接口 由 drbear ...