如何配置vue-cli4.0

这是一期主要分享vue-cli4.0配置

新建一个项目，最令人为难的是配置环境。拿vue来说，创建项目很简单，跟着文档走即可，但是要知道配置本地，测试，生产环境，以及反向代理等等，如果对于一个对vue构建不是特别了解，或者对webpack不是特别了解的人来说，真是很为难。

创建项目不再赘述，直接看如何配置环境。

配置反向代理

反向代理其实就是在本地为了解决跨域问题，将本地启动的比如localhost:8080代理成测试环境，发送给后端就不会出现跨域的问题。

vue-cli2.0以及以前，都是在创建项目的时候，会自动创建一个文件夹build，里面有各个环境配置的文件。vue-cli3.0及之后的版本，省去了这个文件夹，让这个项目结构更加清晰。

我们需要配置时，需要手动在最外层，即跟public文件夹同一级，创建vue.config.js文件夹，用来放所有配置项。

我所配置的反向代理在devServer里配置。

module.exports={
    assetsDir:'static',
    publicPath:'./',
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/mall': {
            target: process.env.VUE_APP_BASE_URL_MALL,
            changeOrigin: true,
            ws: true,
            pathRewrite: {
                '^/mall': ''
            }
          },
        },
    },
}

如上的代码将/mall代理成target里面的环境(target环境，下面会做详细描述)，需要注意，反向代理只是针对本地，测试和正式环境不需要代理，在做发请求封装的时候需注意。

配置环境

看下package.json中的scripts项，有几个环境，可以直接npm run对应的环境即可。

如果想配置其他名称或者其他的环境，可以在vue.config.js同一级添加

开发环境env.development

测试环境env.stage

正式环境env.production

在对应的环境文件里，配置如下

NODE_ENV=stage
VUE_APP_BASE_URL_MALL='http://test.cn'

其中NODE_ENV配置的是环境，可以在后期根据环境进行区分本地/测试/正式环境

VUE_APP_是定义相对应的环境变量，可以在反向代理和封装请求的时候使用。

以下是我对发请求进行的封装

import axios from 'axios'

export default function http({url,method='GET',data=null}) {
    return new Promise((resolve, reject) => {
        let wholeUrl=''
        // development：本地；stage:测试；production：正式 
        if(process.env.NODE_ENV=='development'){
            wholeUrl=`/mall${url}`
        }else {
            wholeUrl=`${process.env.VUE_APP_BASE_URL_MALL}${url}`
        }
        axios({url:wholeUrl,method,data}).then(res=>{
            resolve(res)
        }).catch(err=>{
            reject(err)
        })
    });
}

在以后不管是发正式还是发测试，均不用手动修改环境，很便利。