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

.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. Redis学习(一)认识并安装redis

    一.初识redis Redis是一个开源的Key-Value数据库,通常被称为数据结构服务器,其值可以是多种常见的数据格式,且读写性能极高,且所有操作都是原子性的. Redis是运行在内存中的,但是可 ...

  2. springboot:This application has no explicit mapping for /erro

    springboot启动没有报错,但是访问的时候返回如上图的错误.看报错内容感觉是没有这个mapping对应的接口.但是确实写了. 最终发现是因为springboot的启动类放的位置不对.启动类所在的 ...

  3. 刷题[BJDCTF2020]Mark loves cat

    解题思路 打开网页,发现是一个博客,基本寻找博客挂载信息,源码等无果后,扫描后台.发现.git泄露 .git泄露 发现.git泄露后,使用Git Extract这款工具,可自动将源码clone到本地 ...

  4. Dynamically allocated memory 动态分配内存【malloc】Memory leaks 内存泄漏

    内存泄露Memory leaks :没有指针指向原来a分配出来的那段空间了

  5. python 给IDLE添加行号

    [LineNumbers] enable=1 enable_editor=1 enable_shell=1 visible=1 [LineNumbers_cfgBindings] linenumber ...

  6. Espruino似乎和Arduino一样

    参考:https://baike.baidu.com/item/Espruino Espruino 编辑 锁定 讨论   Espruino 是一个微处理器的 JavaScript 解释器,我们用它来创 ...

  7. 下载 Oracle Database XE 11gR2

    操作系统:Windows 10 x64 第一节:下载 Oracle Database XE 11gR2 第二节:安装.验证安装 Oracle Database XE 11gR2 第三节:Oracle ...

  8. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

  9. 小白使用Hystrix

    Hystrix是什么东西?百度一下: 没错,hystrix是豪猪的意思,作为SpringCloud微服务系统中保持服务稳定的重要组件,正如它的名字一样,它对整个系统起到了保护的作用. 在许多文章当中把 ...

  10. str常用操作方法

    1. 索引(即下标) s = 'ABCDEFGHIJKLMN' s1 = s[0] print('s[0] = ' + s1) #s[0] = A print('s[3] = '+ s[3]) #s[ ...