如何配置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)
        })
    });
}

在以后不管是發正式還是發測試，均不用手動修改環境，很便利。