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

一、找到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. 转接口IC ADV7280/ADV7280-M:CVBS转MIPI转接口芯片 10位、4倍过采样标清电视视频解码器,支持去隔行

    概述ADV7280/ADV7280-M是功能丰富的单芯片.多格式视频解码器.ADV7280/ADV7280-M可自动检测标准模拟基带视频信号,兼容复合.S视频和分量视频形式的NTSC.PAL和SECA ...

  2. Bar 3D 和Pie 3D的统计图形

    最近在做一个关于图形统计的界面,主要用到的是Dev控件ChartControl(功能很强大,能解决基本和复杂图形统计问题). ChartControl主要有Diagram.Series.Legend三 ...

  3. Android M以上运行时权限(Google官方出品)

    转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6690152.html 网上运行时权限的例子.Demo无计其数,但是和Google官方出品的比起来,都显得很 ...

  4. mysql 免安装版 + sqlyog 安装 步骤 --- 发的有点晚

    总有些朋友不会安装mysql,其实软件安装不是学习mysql的重点,基本上也就安装一次,工作后一般公司里也不会让你安装,如果非要安装,百度一下就行了.安装版本百度上有许多,下面就提供一个免安装版的步骤 ...

  5. 复选框选中删除行(DOM练习)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 一个例子简要说明include和require的区别

    先编辑command.php文件 echo 'hello'.PHP_EOL; 然后编辑console.php文件 for($i=1;$i<=3;++$i){ require 'command1. ...

  7. 对java面向对象的初识

    我其实一直想写点东西练练自己文笔,今天写下这篇技术类型的文章也没有一个好的格式和章法,但万事开头难,那么就从面向对象开始. 我们大部分人都知道互联网软件的存在,时刻影响了我们的现实生活,那么面向对象的 ...

  8. angular 实现导航ng-click切换

    angular写的导航.自学angular已有一段时间. <!doctype html><html lang="en"><head> <m ...

  9. Winform 使用DotNetBar 根据菜单加载TabControl

    winform 如何使用TabControl 控件来做winform界面框架? 这样的效果: 首先菜单的窗口展示的承载器为TabControl 控件,这个控件本身包含多页面预览和页面初始化. 如图所示 ...

  10. MOSFET使用与H桥驱动问题

    0.小叙闲言 最开始学习三极管的时候,很注重它的工作原理,后来到了实际应用,就直接把三极管或MOSFET直接当作一个开关器件使用.直到前这几天,接触到MOSFET组成的H桥驱动电路时,发现它纯当作一个 ...