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

获取命令行参数

读取 Node 命令行的参数:

// 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 文件:

// 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 中引入并执行构建脚本:

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

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

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