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

一、找到VUE项目中的配置文件:

1.dev.env.js(开发环境);

2.prod.env.js(生产环境)。

二、打开文件后配置参数(该处以分别配置两个环境下的参数'ROOT'为例):

1.在dev.env.js文件中

2.在prod.env.js文件中

配置好之后,我们就可以在项目中引用了。

三、打开项目中的文件,就可使用该参数,

var root=process.env.ROOT;

四、重启项目。

VUE依赖webpack分别给开发环境和生产环境配置不同的常量值并在项目中动态引用的更多相关文章

  1. Webpack配置区分开发环境和生产环境

    在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境:生产环境通常指的是我 ...

  2. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  3. webpack深入场景——开发环境和生产环境配置

    以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配 ...

  4. webpack开发环境和生产环境切换原理

    在package.json中有如下设置: "scripts": {    "dev": "node build/dev-server.js" ...

  5. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

  6. webpack-dev-middleware 和 webpack-hot-middleware 配置开发环境和生产环境;webpack脚手架;仿vue-cli

    webpack-dev-server更新后自带express服务器,已经不需要自己搭建.vue-cli从17年底左右也换成了最新的webpack-dev-server,而不是用webpack-dev- ...

  7. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

  8. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  9. Webpack4 学习笔记八 开发环境和生产环境配置

    webpack resolve属性 webpack 区分开发环境和生产环境 webpack resolve属性 该选项的作用是设置模块如何被解析. resolve.alias: 设置别名, 在vue中 ...

随机推荐

  1. 改变iOS app的icon(iOS10.3)

    改变iOS app的icon 官方 iOS10.3新增了可以让开发者去更改app的icon,接下来看看怎么更改. 官方API给的东西很少,只是介绍了一个实例方法: open func setAlter ...

  2. sqlldr用法

    SQL*LOADER是ORACLE的数据加载工具,通常用来将操作系统文件迁移到ORACLE数据库中.SQL*LOADER是大型数据仓库选择使用的加载方法,因为它提供了最快速的途径(DIRECT,PAR ...

  3. Parse error: syntax error, unexpected '[' in D:\phpStudy\WWW\tp5\thinkphp\library\think\Loader.php on line 18

    g刚学习tp5就遇到了这个问题  百思不得其解,看到官网说明 是基于PHP5.4 设计的  打开 phpstudy版本一看 就呵呵呵了 .还是5.3的版本.更换版本之后 就ok了.

  4. .net core 利用中间件处理常见的网站功能 包括 session、routers、重定向、重写和文件下载

    在.net core中所有的请求都会被请求中间件所处理,所以我们可以通过在中间件里边添加对应的功能然后在服务中添加注入来实现对应的功能 文件位置:Startup.cs=>Configure方法, ...

  5. js解决苹果移动端300ms延迟的问题

    做移动端页面开发的可能会了解到,ios系统click事件会有卡顿的现象,这个问题的根源是苹果本身自带的safari有双击放大页面的功能,再次双击会返回到原始尺寸,所以在第一次点击的系统会延迟300ms ...

  6. html自定义调控

    为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信息对于读者来说可能是不需要的,但是可以轻松的访问这些信息将会给我们开发者的工作带来极大的便利. 例如,假设你有一 ...

  7. DirectFB 之 动画播放初步

    在基于linux的嵌入式仿真平台开发中,终端的美观和可定制是一个重要的问题.单调的"白纸黑字"型表现方式可谓大煞风景.改造linux控制台使之美观可定制地展示开机信息和logo成为 ...

  8. js图片轮播

    html部分 <a href="" id="pta"><div id="picture" class="pt&q ...

  9. 简析ASP.NET WebApi的跨域签名

    之前的文章写了关于WebApi的跨域问题,当中的方法只是解决了简单请求的跨域问题而非简单请求的跨域问题则没有解决. 要弄清楚 CORS规范将哪些类型的跨域资源请求划分为简单请求的范畴,需要额外了解几个 ...

  10. .NET Core 2.0体验

    .NET Core 2.0预览版及.NET Standard 2.0 Preview 这个月也就要发布了. 具体相关信息可以查看之前的文章.NET Core 2.0及.NET Standard 2.0 ...