vue配置命令打包不同的生产环境与测试环境 我们在打包VUE项目的时候通常会使用npm run build命令。但是我们经常要打包测试环境与生产环境，然而在打不同环境的包时候，某些配置项是不同的。我们每次通过手动来修改的话会非常繁琐。如果需要手动修改的地方过多的话，难免会有遗漏。目前我参与开发的项目就有3种不同的环境需要处理本地开发环境npm run dev服务器测试环境npm run build:stage生产环境npm run build:prod可以看到，除了本地开发环境用的是dev本地预览，其他两个打包命令都加上了后缀。我们就是通过后缀的命令来区分不同的打包环境。这里我使用vue-cli3的脚手架环境进行演示。首先vue里面配置node.js全局变量的文件是单独的一个.env文件。这里我们创建三种不同环境的.env文件。.env.development // 开发环境 .env.production // 生产环境 .env.testproduction // 测试环境文件创建好了放到vue项目的根目录即可（一定要注意文件名前面是有“.”的）。创建好了文件，我们在文件里面写上配置。这里以Axios的不同环境调用的接口做演示，其他部分举一反三# 标记 NODE_ENV = 'production' # base api VUE_APP_BASE_API = 'https://foo.foo.com' 这里解释一下。NODE_ENV这个是用来标记当前的环境是什么，等会儿会在vue里面用到下面的VUE_APP_BASE_API定义了一个接口的常量，等会儿也会用到。根据不同的环境写好配置文件以后，我们找到项目的package.json配置在scripts里可以看到build配置。我们把配置改为我们写好的三个"dev": "vue-cli-service serve --mode development", "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode testproduction", 这里主要是注意后面增加了--mode xxxxx这些参数这个参数的作用是node根据我们刚刚创建的.env文件去编译里面的变量，让我们系统可以用。xxxxx是.env.后面的名称准备好这些以后，我们在VUE里面就可以使用process.env.NODE_ENV来判断当前的环境了。我在封装的axios里面，增加了一个switch判断，根据process.env.NODE_ENV判断当前的环境然后把api定义为VUE_APP_BASE_API即可。这样我们可以通过命令去打包不同的环境，而且每次打包也不用重新去更改接口了。其他配置基本是一致的，都是通过判断不同的环境获取到不同的配置而已

Vux+Axios拦截器增加loading的问题 很多时候，我们在页面使用Ajax刷新时候，会希望它出现loading的图标，让用户体验更好一些。那么如果我们每次在Axios里面进行请求，都要显示loading图标的话，那么没有一个全局的方法的话，势必会造成代码冗余的问题。有什么方法可以实现这个方法呢？这里，我们就要用到Axios的请求拦截器与相应拦截器了首先，我们在请求拦截器里面增加一个VUX的loading组件axios.interceptors.request.use( config => { //请求拦截器，调用loading插件 // 显示loading // 判断是否重复提交请求，也就是loading是否还存在，如果存在则不显示新的loading let isShow = window.app.$vux.loading.isVisible() if(!isShow&&config.showLoading){ window.app.$vux.loading.show({ text: 'Loading' }) } config.data = JSON.stringify(config.data); config.headers = { 'Content-Type': 'application/json', } return config; }, error => { return Promise.reject(err); } ); 整个数据里面，我们看到了里面有一个参数是$vux.loading.isVisible()这个。这个是vux自带的一个loading状态显示的参数。如果loading正在显示的话，它会是true，否则的话就显示false因为我们不希望同时有多个请求的时候，出现多个loading状态，这样的话用户看起来会很迷茫，所以我们在调用的时候，先判断一下这个状态。然后在响应拦截器里面关掉它就好了

关于VUE在封装了Axios后手动刷新页面拦截器无效的问题。 项目类型：vue+vux+axios刚开始，把Axios封装在了http.js文件里面，然后为了使用VUX的提示框消息，把拦截器直接写在了main.js里面。直接调用接口，一切正常。然而因为返回值有统一的code错误代码提示，所以在拦截器里面加入了code的判断以便统一返回值。刚开始一切都是按照预期的结果来走的。就在一个夜黑风高的晚上，我头晕眼花的按F5手动刷新了一下页面，惊奇的发现拦截器失效了，并没有拦截外面的Coode Json代码层，而是直接把服务器的全部json数据劈头盖脸的砸在了我的脸上。一脸懵逼的我以为是接口的问题，可是在组件里面直接用console.log打印出来的数据又是对的。然后我突然想到了一个问题，直接点击页面返回的话，确实是OK的，但是如果按F5手动刷新的话，Axios并不会直接走main.js里面的拦截器代码。后来我把拦截器放在了封装的http.js里面，结果就一切正常了，不过郁闷的是放在了外面以后，vux的提示插件没有办法用了。打印了this指针，果不其然的undefind了，后来想到了一个比较变通的方法，我在index.html里面增加了一个var app用来存储main里面初始化的vue对象，并且在main.js里面把初始化的vue对象给赋值到windows.app上面，这样全局都可以使用了。把vux的提示代码加上window.app.$vux.toast.show 完美解决问题！

VUE中使用mathjs的方法 官方文档并没有说明通过npm安装以后，如果在vue里面使用，我今天研究了一下，可以用插件的方法引入进去。首先，通过npm安装mathjsnpm install mathjs --save 然后在main.js里面通过import引入// import math from 'mathjs' // 废弃用法 import * as math from 'mathjs' // 新版本需要这样引入 感谢评论区的指出 然后重点来了。在后面加入Vue.prototype.$math = math 加入以后，在项目里就可以使用了使用方法比如this.$math.add(5,3) // 返回的结果等于8

VUE如何在for循环里面根据内容值动态的加入class 最近在做玩家蚂蚁项目的时候遇到了一个评分显示的小功能，这个在前端显示的星星是用class样式来进行控制的class="real-star comment-stars-width5"数据库里记录的信息只有一个评分1-5。我们如果用一般的php方法直接在class里面用comment-stars-width{$score}这样是行不通的。在查了很多资料和做过很多尝试以后，确定了一个可行的方法我们使用vue的:class来进行class的绑定。:class="`comment-stars-width`+s.score"  然后把前面需要的属性前缀用 ``包裹起来，后面的值用+号连起来，这样渲染出来的数据就是我们想要的数据样式了！