vue cli3搭建的项目配置不同的环境

1、前言

cli3发布以来，vue搭建项目变得更加自定义了。项目结构也变得更加简洁明了。但是对于不同环境的配置也变得不一样了

2、介绍

官方默认两种类型 develpoment production,而我们实际开发过程中，会有本地开发，测试环境，正式环境等等，因而这两种环境变量是不够的，因而需要第三种乃至多种变量环境。官方也给出了解决方案。可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。

3、配置不同环境

首先我们在项目根目录下创建如下文件

.env.development

.env.production

.env.test

每个文件的具体内容

.env.development

/* VUE_APP_CURRENTMODE 当前环境变量 */

VUE_APP_CURRENTMODE = 'development'

VUE_APP_LOGOUT_URL = '自己的地址 '

.env.production

VUE_APP_CURRENTMODE = 'production'

VUE_APP_HOST_URL = ' '

.env.test

/* NODE_ENV 目的用于指定是一开发还是生产形式进行操作  test环境变量还是在development模式下*/

NODE_ENV = 'development'

VUE_APP_CURRENTMODE = 'test'

VUE_APP_HOST_URL = ' '

package.json

"scripts": {

    "serve:dev": "vue-cli-service serve --mode development",

    "serve:prod": "vue-cli-service serve --mode production",

    "serve:test": "vue-cli-service serve --mode test",

    "lint": "vue-cli-service lint",

  },

4、使用

在vue.config.js文件下对不同环境百年两下的设置代理

const devProxy = ['/api'] // 代理

let target = process.env.VUE_APP_HOST_URL

// 生成代理配置对象

let proxyObj = {}

devProxy.forEach((value) => {

    proxyObj[value] = {

        target: target,

        changeOrigin: true,

        pathRewrite: {

            [`^${value}`]: value

        }

    }

})

module.exports = {

    devServer: {

        ...

        proxy: proxyObj,

        ...

   },

}