vue2项目从0搭建(三):配置环境变量及对应的webpack配置

前言

实际业务开发中,一个项目很可能会同时配置好几套环境。

比如:常规开发环境,开发测试环境,正式的测试环境,预发测试环境,客户甲的生产环境,客户乙的生产环境,通用生产环境,独立应用环境,微前端环境,大屏专用环境,移动端环境。

一女多嫁的实际业务场景,就需要我们进行多样化的环境配置。不同的环境需要有不同的一些标识,也要有一些不同的webpack配置或者资源优化。

vue-cli环境变量配置

在vue-cli中,想要配置环境变量,需要在根目录层级配置.env.[envName]的文件,这里的[envName]就是你配置的环境名称

官方文档在这里:模式和环境变量 | Vue CLI

.env.[...]类型的文件内部,需要按照key=value的格式去写

NODE_ENV为环境名称,个人自定义的变量需要按照固定格式去写

开发环境(.env.development)

NODE_ENV=development
VUE_APP_SET_NAME=development
VUE_APP_SET_OTHER=devOther

开发测试环境(env.developtest)

NODE_ENV=developtest
VUE_APP_TITLE=testTitle
VUE_APP_URL=baidu.com
VUE_APP_SDK=false

至于怎么引用这两个文件,就需要我们配置对应的运行命令,

语法: 运行命令 --mode modeName

package.json

根据环境类型使用不同的webpack配置

vue.config.js是用来配置脚手架编译打包时候的的配置,基本都是webpack中的配置

我们可以给每个环境去创建一个他对应的webpack配置,并且在构建或者打包时引入

vue.config.js

const { defineConfig } = require('@vue/cli-service')

console.log(process.env.NODE_ENV,'环境')
let envName = process.env.NODE_ENV
let config = {}
switch(envName){
  case 'developtest':
   config = require('./developTest.config');
  break
  case 'development':
   config = require('./development.config')
}

module.exports = defineConfig(config)

开发环境配置:development.config.js

const fs = require('fs')
const path = require('path')
console.log('development环境配置文件')
let version_info = JSON.stringify({version:"1.1.0",modeName:'development'})
fs.writeFile(path.join(__dirname,'./public/version.json'),version_info,function(err){
   if(err){
     return 
   }
})
module.exports = {
    transpileDependencies: true,
    lintOnSave: false,
    devServer:{
      client:{
        overlay:false
      },
      port:8080,
      open:true,
      proxy:{
        '/server1':{
          target:'http://localhost:3001',
          ws:false,
          changeOrigin:true,
          pathRewrite:{
            '^/server1':''
          }
        },
        '/server2':{
          target:'http://localhost:3002',
          ws:false,
          changeOrigin:true,
          pathRewrite:{
            '^/server2':''
          }
        }
      }
    }
  }

开发测试环境配置:developTest.config.js

const fs = require('fs')
const path = require('path')
console.log('developTest环境配置文件')
let version_info = JSON.stringify({version:"1.1.0",modeName:'developTest'})
fs.writeFile(path.join(__dirname,'./public/version.json'),version_info,function(err){
   if(err){
     return 
   }
})
module.exports = {

    transpileDependencies: true,
    lintOnSave: false,
    devServer:{
      client:{
        overlay:false
      },
      port:8080,
      open:true,
      proxy:{
        '/server1':{
          target:'http://localhost:3001',
          ws:false,
          changeOrigin:true,
          pathRewrite:{
            '^/server1':''
          }
        },
        '/server2':{
          target:'http://localhost:3002',
          ws:false,
          changeOrigin:true,
          pathRewrite:{
            '^/server2':''
          }
        }
      }
    }
  }

查看效果

环境变量

在vue项目中,你可以在任何组件,引用的js文件,甚至根文件html中引用process.env这个值去查看当前的环境字段值

开发环境

启动开发环境

运行npm run serve命令,

查看自定义的变量

<template>
    <div>
        <el-button @click="checkEnvInfo">查看环境信息</el-button>
        <p>当前环境名称:{{ envName }}</p>
    </div>
</template>
<script>
export default {
    name: 'envMode',
    data(){
        return{
           envName:''
        }
    },
    created(){
     this.envName = process.env.NODE_ENV
    },
    methods:{
        checkEnvInfo(){
            console.log(process.env)
        }
    }
}
</script>