1、集中式的环境配置:

(1)使用vue-cli基本上不用去处理什么,只需要在config文件夹下的文件中配置写既可:

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_URL:'"/wt"'
})

注意里面的引号关系,接着就是在webpack的配置中定义plugin:webpack.define.plugin;

webpack.dev.conf.js

插件会在编译时定义一个全局的常量变量,在你所需要的地方直接使用process.env.BASE_URL就可以取到值;

(2)这一种方式是在js中添加的环境变量的控制:

package.json

"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack --env.minimize"
},

这种方式是通过cross-env在js中帮助声明环境变量;通过环境变量可以将不同的配置分配到不同的环境中,比如一些需要的域名,常量变量等等;不过最后都是需要webpack.define.plugin插件中定义,插件会在编译时定义一个全局的常量变量,在你所需要的地方直接使用process.env.BASE_URL就可以取到值;

一般的做法:

集中定义管理:

这样定义好了以后,还需要做些处理,将其序列化一下:

let env;
switch (process.env.NODE_ENV) {
case "production":
env = require("./prod.env");
break;
case "production.test":
env = require("./prod.test.env");
break;
case "production.test2":
env = require("./prod.test2.env");
break;
default:
env = require("./dev.env");
break; } Object.keys(env).forEach(_key => {
env[_key] = JSON.stringify(env[_key])
}); module.exports = env;

根据js中的cross-env NODE_ENV=development 去判断应该取哪个文件中的配置,导出的env最后会在定义webpack.define.plugin的地方使用;将其转换成一个全局的常量变量而直接使用;所以这种方式需要安装cross-env的模块;

使用vue在开发中的一些小问题--利用环境变量做一些常量的定义的更多相关文章

  1. 使用vue在开发中的一些小问题--使用vue-cli起的服务器无法在局域网访问

    2.使用vue-cli起的服务器无法在局域网访问 这个很简单,在package.json文件中的js启动项配置中增加--host 0.0.0.0 注意是--host而不是-host,此时如果有--op ...

  2. vue vuex开发中遇到的问题及解决小技巧

    1.在vue的开发中,如果使用了vuex,数据的组装,修改时在mutations中,页面是建议修改变量值的,如果强制修改,控制台就会出现错误.如下: 这种错误虽然不会影响结果,但是是vuex不提倡的方 ...

  3. Android开发中实现桌面小部件

    详细信息请参考原文:Android开发中实现桌面小部件 在Android开发中,有时候我们的App设计的功能比较多的时候,需要根据需要更简洁的为用户提供清晰已用的某些功能的时候,用桌面小部件就是一个很 ...

  4. JAVA开发中遇到的小白点

    这里主要是自己个人开发中遇到的一些小问题,自己攒起来,来弥补自己薄弱的JAVA基础,大神不要见笑 1. DateFormat格式化的HH和hh区别: public static boolean com ...

  5. vue使用过程中的一些小技巧

    这些也是自己平时项目中遇到过的一些问题,看到有人整理了出来,也就转载保存一下 文章内容总结: 组件style的scoped Vue 数组/对象更新 视图不更新 vue filters 过滤器的使用 列 ...

  6. 微信小程序开发——前端如何区分小程序运行环境

    前言: 之前用vue做h5项目,对于接口请求,都是根据前端访问域名来判断运行环境,然后自动适配对应的服务器地址的.这样的好处就是在开发.测试及发布上线全程都不需要手动去改接口请求地址,只要提前配置好就 ...

  7. Mac笔记本中是用Idea开发工具在Java项目中调用python脚本遇到的环境变量问题解决

    问题描述: mac笔记本本身会自带几个python版本,比如python2.7版本,我没有改动mac默认的python版本,只是安装了python3.7版本. 使用Pycharm开发Python项目没 ...

  8. 彻底搞懂Java开发工具包(JDK)安装及环境变量配置

    一.Java 和 JDK 是什么 Java:Java是一种优秀的程序设计语言,它有非常多的语言特性,如简单性.面向对象.可移植性等.Java 并不只是一种语言,而是一个完整的平台,它有一个庞大的库,其 ...

  9. Java开发介绍之JDK JRE JVM 和 环境变量配置

    一.JDK>JRE>JVM JDK(Java Development Kit):Java开发工具包 JDK中包含JRE,在JDK的安装目录下有一个名为jre的目录,里面有两个文件夹bin和 ...

随机推荐

  1. 在Windows10中安装与配置Nginx

    一.使用环境: Windows 10 1909 nginx 1.16.1 二.安装与配置: 1. 打开链接,http://nginx.org/en/download.html 下载稳定版本nginx ...

  2. css3 @page

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. ASP.NET Aries 高级开发教程:表单检测字段是否已存(番外篇)

    前言: 昨天刚好有人问了这个问题,因此就针对这个问题,补上一篇吧. 正文: 如图:在用户编辑列表中,用户名是会自动检测是否已存在的. 具体对应的Html内容如下: <label><e ...

  4. 关于css布局的记录(一) --table和flex布局

    1.table方式布局 效果图: 直接用table等标签布局,table布局自动垂直居中 亦可用 display:table == <table>.display:table-cell = ...

  5. [小技巧]你真的了解C#中的Math.Round么?

    今天在某.NET Core 群中看到有人在问Math.Round的问题.其实这个问题之前有很多人遇到了,在此总结一下. 开发者为了实现小数点后 2 位的四舍五入,编写了如下代码, var num = ...

  6. 【ftp服务】ftp登陆报错530 Login incorrect. Login failed.

    ftp登陆时报错,530 Login incorrect.Login failed.1.cat /etc/passwd,查看你登陆的账户主目录和登陆shell对应的是什么,我的是/sbin/nolog ...

  7. eruda手机端调试神器

    在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,如果想在手机上能和浏览器一样看控制台调试就更加完美了: 一个手机端调试神器eruda是一个专为手机网页前端设计的调试面板 ...

  8. vs2017 C# ActiveX浏览器插件 创建 发布 C# windows窗体控件库(.NET Framework)注意事项

    vs2017需要安装插 插件下载地址:https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.Micro ...

  9. LeetCode刷题191127

    数据库: 1179 部门表 Department: +---------------+---------+| Column Name | Type |+---------------+-------- ...

  10. 并发编程~~~协程~~~greenlet模块, gevent模块

    一 协程 1. 协程: 单线程下的并发,又称微线程,纤程.协程是一种用户态的轻量级线程,即协程是由用户程序自己控制调度的. 并发真正的核心: 切换并且保持状态. 开启协程并发的执行,自己的程序把控着C ...