项目小记

107 阅读1分钟

项目说明

  • 搭建一套公共配置项目,主要包含公共组件、环境配置,为业务项目提供支持;
  • 项目基础是vue-cli,通过重写打包和本地运行命令,实现按子项目和开发环境来运行项目,使用cross-spawn来运行命令,development.js是本地运行命令脚本,production.js打包运行命令脚本,运行脚本时会根据命令传入的参数,获取环境变量、项目名称,调用base.config.js中的配置信息,生成.env.config.js全局配置文件,该文件包含环境变量、项目名称、服务地址等等,实现子项目在不同开发环境的调试

主要作用

通过配置的命令,完成子项目在不同开发环境的调试,

公共配置说明

  • 执行命令:打包、本地运行 (build/serve)
  • 运行环境:本地环境、测试环境、线上环境 (local/test/produce)
  • 区分多个子项目:项目标识 (sub-pc/sub-pm)
npm run 执行命令 子项目名称 运行环境

本地运行

npm run serve test sub-pm

打包

npm run build test sub-pm

目录结构

└── vue-ss······················································ 根文件
  ├─ public····················································· 公共资源(暂时未使用)
  ├─ src························································ 主文件目录
    ├─ assets··················································· 公共资源文件夹
    ├─ components··············································· 公共组件
    ├─ plugins·················································· 公共插件
    ├─ sub-pc··················································· 子项目sub-pc
      ├─ components············································· 子项目公共组件
      ├─ main.js················································ 子项目入口文件
      ├─ index.html············································· 子项目主页面
    ├─ sub-pm··················································· 子项目sub-pm
  ├─ .env.config.js············································· 生成的全局配置文件,包含环境变量、项目名称等等
  ├─ .gitignore················································· git忽略配置文件
  ├─ babel.config.js············································ babel配置文件
  ├─ package.json··············································· 包配置文件
  ├─ vue.config.js·············································· vue配置文件
  ├─ base.config.js············································· 项目配置信息
  ├─ development.js············································· 本地运行命令配置
  ├─ production.js·············································· 打包运行命令配置

demo项目git地址

github.com/webzhanghua…