前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 构建项目写入配置文件

Vue 构建项目写入配置文件

作者头像
数媒派
发布2022-12-01 15:26:24
3880
发布2022-12-01 15:26:24
举报
文章被收录于专栏:产品优化

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 || 'pipbest.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 中引入生成的配置文件:

代码语言:javascript
复制
<script src="<%= BASE_URL %>setting.js?<%=Date.now()%>"></script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue 构建项目写入配置文件
    • 获取命令行参数
      • 将命令行参数写入文件
        • 执行并引入
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档