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

.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. Docker:一、开始部署第一个Asp.net应用

    工具: docker desktop :一个使用Docker的IDE工具,可以理解为SourceTree,也是使用git的一个桌面化工具: kitematic :配合desctop,用来管理本地的镜像 ...

  2. 容器云平台No.6~企业级分布式存储Ceph

    简介 ceph作为一个统一的分布式存储系统,提供了高性能,高可用性,高扩展性.ceph的统一体现在其可以提供文件系统.块存储.对象存储,在云环境中,通常采用ceph作为后端存储来保证数据的高可用性. ...

  3. centos7下安装MySQL 5.7.26 二进制版本(免安装绿色版)

    MySQL 5.7.26 二进制版本安装(免安装绿色版) 下载地址 https://downloads.mysql.com/archives/community/ https://cdn.mysql. ...

  4. ARM架构下的Docker环境,OpenJDK官方没有8版本镜像,如何完美解决?

    为什么需要ARM架构下的OpenJDK8的Docker镜像? 对现有的Java应用,之前一直运行在x86处理器环境下,编译和运行都是JDK8,如今在树莓派的Docker环境运行(或者其他ARM架构电脑 ...

  5. SpringBoot-05-web开发

    5. SpringBoot Web开发 5.1 web开发探究 简介 SpringBoot最大的特点就是自动装配! 使用SpringBoot的步骤: 创建一个SpringBoot应用,选择我们需要的模 ...

  6. 055 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 02 数组的概念

    055 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 02 数组的概念 本文知识点:数组的概念 数组的声明创建.初始化 在学习数组的声明创建.初始化前,我们可以和之 ...

  7. TCHAR数据类型介绍

    转载:https://blog.csdn.net/mousebaby808/article/details/5259944 并不是所有的Windows操作系统都支持UNICODE编码的API(例如早期 ...

  8. 微型直流电机控制基本方法 L298N模块

    控制任务 让单个直流电机在L298N模块驱动下,完成制动.自由停车,正反转,加减速等基本动作 芯片模块及电路设计 图1 L298N芯片引脚 图2 L298N驱动模块 表1 L298N驱动模块的控制引脚 ...

  9. Tensorflow学习笔记No.3

    使用tf.data加载数据 tf.data是tensorflow2.0中加入的数据加载模块,是一个非常便捷的处理数据的模块. 这里简单介绍一些tf.data的使用方法. 1.加载tensorflow中 ...

  10. ASP。NET MVC (NetCore 2.0)用于处理实体框架、DbContexts和对象的通用控制器和视图

    下载source - 1.5 MB 介绍 本文的源代码已更新到NetCore 2.0 ASP.净MVC项目. 当我们开始开发一个ASP.在Microsoft Visual Studio中,我们发现通过 ...