# 02 Vue 构建项目写入配置文件

## 获取命令行参数

读取 Node 命令行的参数：

```javascript
// getArgList.js 获取参数列表
module.exports = function getArgList() {
  let argvs
  const res = {}
  try {
    argvs = JSON.parse(process.env.npm_config_argv).original
  } catch (ex) {
    argvs = process.argv
  }
  const argv = argvs.slice(2)
  for (const i in argv) {
    const key = argv[i].match(/--(\S*)=/)[1]
    const value = argv[i].split('=')[1]
    res[key] = value
  }
  return res
}
```

## 将命令行参数写入文件

新建一个 `client.js` 脚本文件，将读取到的命令行参数写入 `setting.js` 文件：

```javascript
// client.js
const fs = require('fs')
const path = require('path')
const argList = require('./getArgList')()

// 构建配置参数
const site_url = argList.site_url || 'chanshiyu.com'
const site_id = argList.site_id || '500'

module.exports = {
  setStart() {
    this.setSetting()
  },
  setSetting() {
    console.log('argList==>', argList)
    const setting = {
      site_url,
      site_id
    }
    console.log('setting==>', setting)
    fs.writeFileSync(
      path.resolve(__dirname, '../public/setting.js'),
      'var setting = ' + JSON.stringify(setting)
    )
  }
}
```

## 执行并引入

在 `vue.config.js` 中引入并执行构建脚本：

```javascript
// vue.config.js
const client = require('./build/client')
client.setStart()
```

最后在 `index.html` 中引入生成的配置文件：

```markup
<script src="<%= BASE_URL %>setting.js?<%=Date.now()%>"></script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chanshiyu.gitbook.io/blog/qian-duan/vue/02vue-gou-jian-xiang-mu-xie-ru-pei-zhi-wen-jian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.