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. RabbitMQ 备份交换机(alternate-exchange)介绍

    RabbitMQ之备份交换机(alternate-exchange) 1.备份交换器,AlternateExchange(AE) 备份交换器是为了实现没有路由到队列的消息,声明交换机的时候添加属性al ...

  2. Redis入门(四)-Java操作Redis

    <Redis入门>系列文章的第四篇,这一节看一下如何用Java版本的redis客户端工具--Jedis来操作redis. Jedis封装了丰富的api来对redis的五种数据类型 stri ...

  3. WinForm 无边框窗体改变尺寸及移动窗体

    #region 无边框窗体移动改变大小 [DllImport("user32.dll")] public static extern bool ReleaseCapture(); ...

  4. Hive数据类型和DDL操作

    hive命令 在Linux下的命令行中直接输入如下命令,可以查看帮助信息: # hive -help 常用的如-e.-f参数. 使用-e参数,可以直接在命令行传递SQL语句进行hive表数据的查询: ...

  5. 为什么学习Python?

    互联网高速发展的今天,很荣幸能够接触计算机这个专业,成为一名程序猿小白,本科期间学习了C.C++.Java.Pthon.C#,每门语言都了解那么一点,学的很杂,刚好遇到大学毕业的这个暑期,在继续读研之 ...

  6. 了解Bootstrap和开发响应式网站

    什么是Bootstrap? Bootstrap是Twitter推出的一个开源的用于web前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CS ...

  7. c#使用CefSharp开发winform——环境搭建

    因为nuget在线下载有时候很慢,所以下载nuget包,进行本地安装 登陆nuget官网https://www.nuget.org/下载相关资源 选择对应版本进行下载,同时需要下载相关依赖的包 ​ 最 ...

  8. angular cli 使用echarts

    1.安装库 npm install typings echarts --global npm install ngx-echarts --save npm install @types/echarts ...

  9. CSS入门(边框、轮廓、元素的分类、盒子模型的三个构成部分)

    一.边框属性 作用:给元素加上一个边框 第一种: border-top border-bottom border-left boder-right 三个属性值: 粗细 线型 颜色 第二种: borde ...

  10. Dynamics 365 Customer Engagement导入解决方案时出错:Microsoft.Crm.CrmException: Plug-in assembly does not contain the required types or assembly content cannot be updated.

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...