「初学者商城」- 后台 - 多环境（新功能）

待我称王封你为后i 2023-06-29 10:57 15阅读 0赞

# 1. 前言 #

--------------------

通常，项目会有多个运行环境：开发、测试，生产等。每个环境的配置文件都需要单独管理，并且需要能动态指定，获取。

# 2. 源码 #

--------------------

完整项目地址：[接口][Link 1]，[后台][Link 2]，[部署][Link 3]

v1.2 标签地址：[接口][Link 4]，[后台][Link 5]，[部署][Link 6]

v1.2 下载地址：接口 [zip][]，[tar.gz][]。后台 [zip][zip 1]，[tar.gz][tar.gz 1]。部署 [zip][zip 2]，[tar.gz][tar.gz 2]。

**注：对于标签的说明[「初学者商城」- 写在最前面 \#5.1][- _ _5.1]**

# 3. 后台 #

--------------------

**注：查看更改内容：[多环境][Link 7]**

## 3.1 获取命令行参数 ##

### 3.1.1 如何获取命令行参数 ###

**使用`yargs`库可以很方便的获取到命令行参数**

const argv = require('yargs').argv;

### 3.1.2 为什么要获取命令行参数 ###

**通过命令行中的参数，可以在调试或者打包时获取不同的配置文件**

先来看看原本在调试和打包时都分别如何获取的配置文件

**调试（webpack.dev.conf.js）：**

plugins: [
        new webpack.DefinePlugin({ 
          'process.env': require('../config/dev.env')
        })
    ]

**打包（webpack.prod.conf.js）：**

const env = require('../config/prod.env')
    
    plugins: [
      // http://vuejs.github.io/vue-loader/en/workflow/production.html
      new webpack.DefinePlugin({ 
        'process.env': env
      })
    ]

很容易看出，不管是调试还是打包时，都会把指定的配置文件获取，并加载，然后项目中使用到的地方就能够正确的替换到值；所以思路就是：**先获取到命令行中的参数，再根据参数获取不同的配置文件，最后把配置文件加载**。

## 3.2 动态获取配置文件 ##

**注：首先要根据命令行中不同的参数获取到不同的配置文件**

// 定义参数配置
    const argv = require('yargs').argv;
    
    // 获取环境变量
    const env = argv.env;
    process.stdout.write('the env is '+ env +'\n');
    
    // require 指定的环境配置文件
    const envConfigFile = "../config/" + env + ".env.js";
    process.stdout.write('the env config file is '+ envConfigFile +'\n');
    
    // 导出
    module.exports = require(envConfigFile);

## 3.3 指定并加载配置文件 ##

**注：根据`webpack`特性，`webpack.dev.conf.js`和`webpack.prod.conf.js`文件都会引入`webpack.base.conf.js`文件，所以指定配置文件的代码就可以放在`webpack.base.conf.js`文件中**

这时，把动态获取配置文件的方法引入进来，并加载

**基础（webpack.base.conf.js）：**

const webpack = require('webpack')
    // 引入 webpack.env.conf 模块
    const envConfig = require('./webpack.env.conf')
    
    // 配置 DefinePlugin 插件
    plugins: [
      // http://vuejs.github.io/vue-loader/en/workflow/production.html
      new webpack.DefinePlugin({ 
        'process.env': envConfig
      })
    ]

## 3.4 更改命令 ##

**注：获取参数时是`require('yargs').argv.env;`，所以指定参数时得是`--env`**

**package.json：**

"scripts": { 
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env dev",
        "stg": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env stg",
        "prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env prod",
        "build:dev": "node build/build.js --env dev",
        "build:stg": "node build/build.js --env stg",
        "build:prod": "node build/build.js --env prod"
      },

在原来的基础上添加了`--env xxx`

## 3.5 打印 ##

**注：打印出来看看是否能动态获取**

**HelloWorld.vue：**

<h2>{ {  env }}</h2>
    
    export default { 
      data () { 
        return { 
          env: process.env.NODE_ENV
        }
      }
    }

## 3.6 其它 ##

1.  版本号的升级

# 4. 验证 #

--------------------

## 4.1 后台 ##

1.  下载`v1.2`标签的代码或者对照本篇博客更改`v1.1`标签的代码
2.  在`vsCode`中打开终端（快捷键：`ctrl`\+`~`）
3.  如果是在`v1.1`基础上做更改，还需安装`yargs`依赖`npm install yargs --save-dev`
4.  如果是下载的`v1.2`标签的代码，则先安装依赖`npm install`
5.  输入`npm run dev`，回车
6.  启动成功后，访问`http://localhost:9527`
7.  显示`development`，表示成功

# 5. 结语 #

--------------------

远离杂乱无章的环境配置。阿，快乐。

希望能够帮助到你

over

[Link 1]: https://github.com/intomylife/osc-api
[Link 2]: https://github.com/intomylife/osc-front
[Link 3]: https://github.com/intomylife/osc-build
[Link 4]: https://github.com/intomylife/osc-api/releases/tag/v1.2
[Link 5]: https://github.com/intomylife/osc-front/releases/tag/v1.2
[Link 6]: https://github.com/intomylife/osc-build/releases/tag/v1.2
[zip]: https://github.com/intomylife/osc-api/archive/v1.2.zip
[tar.gz]: https://github.com/intomylife/osc-api/archive/v1.2.tar.gz
[zip 1]: https://github.com/intomylife/osc-front/archive/v1.2.zip
[tar.gz 1]: https://github.com/intomylife/osc-front/archive/v1.2.tar.gz
[zip 2]: https://github.com/intomylife/osc-build/archive/v1.2.zip
[tar.gz 2]: https://github.com/intomylife/osc-build/archive/v1.2.tar.gz
[- _ _5.1]: https://intomylife.blog.csdn.net/article/details/103745935
[Link 7]: https://github.com/intomylife/osc-front/commit/f9a2537bfebcc75ec056cdc3c696c0285e3320ef