---

title: 无星的前端之旅（十）——多环境打包+命令行参数读取
comments: true
date: 2020-09-04 14:32:54

Categories:
- vue
tags:
- vue
- 前端

---

背景

多环境部署的时候总会有些参数需要写入

在vue-cli3创建的项目中可以通过webpack的配置文件写入

vue-cli4中没有了webpack配置文件，取而代之的事vue.config.js

实际上有两种方式可以完成这一需求

Mode模式

这是vue-cli4提供的能力,通过创建

.env.环境

方式创建不同环境下的不同配套参数

需要注意的是

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

命令行注入

除了某些配套参数，可能还有些需要单独注入的参数，比如不同渠道id在Jenkins打包时可选用到。

这里直接举个例子

1.如何写入参数

## 修改前打包
npm run build:dev
## 修改后打包
npm run build:dev -x1 -x2

2.如何读取参数

新建js文件，例如:

在项目根目录下新建config文件夹，新建environment.js

# ./config/environment.js

const configArgv = JSON.parse(process.env.npm_config_argv);
// 获取到参数
const original = configArgv.original.slice(1);
// 参数1
const x1 = original[1] ? original[1].replace(/-/g, '') : '默认值1';
const x2 = original[2] ? original2.replace(/-/g, '') : '默认值2';


module.exports = {
  x1,x2
};

3.如何写入环境变量

你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。

也就是说，可以在vue.config.js引入上述的environment.js进行赋值

例如

./vue.config.js

const environment = require('./config/environment');

process.env.VUE_APP_X1 = environment.x1;
process.env.VUE_APP_X2 = environment.x2;

package.json中的script如何获取命令行输入的参数

例如

# package.json
{
      "scripts":{
            "test":"npx hexo clean && hexo g -d"
      }
}

命令行输入

npm run test -- 参数1 参数2

#实际上运行的就是
npx hexo clean && hexo g -d 参数1 参数2

-- 后面的参数会被自动补全到对应的命令后面