前端开发

可视化架构图

开源地址

vant

http://mui.ucmed.cn/#/zh-CN/image

 前端开发定义
前端用于数据可视化实现，采用html5+css3+vue+query+echart+leaflet等框架进行开发。
 根目录配置使用

//项目项目私有图片根目录
this.$appConfig.imgRootO  "/images/rg"
//静态公共图片根目录
this.$appConfig.imgRoot  "/images"
//接口根目录 
this.$appConfig.api.root  "//api.rg1008.com",
//附件上传根目录
this.$appConfig.api.upload "//api.rg1008.com/bo/api/v3/file/upload",
//当前应用根路径
this.$appNavs.currentRoot  "//rg1008.com"

//vue模板中使用

<div id="appMain" :class="theme" class="g-app-scrollbar">
    <div :class="`lang-${lang}`">

      {{$appConfig.imgRootO}}
      {{$appConfig.imgRoot}}
      {{$appConfig.api.root}}
      {{$appConfig.api.upload}}
      {{$appNavs.currentRoot}}

    </div>
  </div>

 CSS3静态图片根目录设置（index.html定义全局）

 <style>
    :root {
      /*定义一个变量--box-color*/
      --img-root: "/images";
      --img-root-o: "/images/<%=htmlWebpackPlugin.options.ownerId%>";
      /*使用变量*/
      /* background-color: var(--box-color); */
    }
  </style>

 vue.config.js 定义打包变量

config.plugin("html").tap(args => {
    args[0].cdn = cdn;
    args[0].env = process.env.NODE_ENV;
    args[0].title = process.env.VUE_APP_TITLE;
    args[0].baiduAK = process.env.VUE_APP_BaiDu_AK;
    args[0].appVersion = cdn.versionMy.appVersion
    args[0].system = process.env.VUE_APP_System;
    args[0].ownerId = ownerId;
    args[0].noPlugins = process.env.VUE_APP_NoPlugins;
    args[0].security = process.env.VUE_APP_Security;
    args[0].imageRoot = process.env.VUE_APP_ImageRoot;
    args[0].imageRootO = process.env.VUE_APP_ImageRootO;
    return args;
  });

 .env文件设置

NODE_ENV=production
  VUE_APP_CONFIG=production
  #//rg1008.com
  VUE_APP_TITLE=打包标题
  VUE_APP_CDN=
  VUE_APP_webSecurityVI=0
  VUE_APP_webSecurityMethod=des
  VUE_APP_webSecurityKey=rg3xb
  VUE_APP_OWNERID=rg
  outputDir=dist-pro/rg
  VUE_APP_BaiDu_AK=9862E14DE5d373de36cd8e91503044b
  VUE_APP_System=rg
  VUE_APP_ImageRoot=/images
  VUE_APP_ImageRootO=/images/rg
  VUE_APP_NoPlugins=

文档更新时间: 2025-05-09 08:37 作者：admin

可视化架构图

开源地址

vue案例

vue结构

微信小程序