element-ui 官方文档内网部署方法

  • 获取官方文档github地址并下载
  • 本地安装部署

由于公司开发处于内网环境,查看element-ui的官方文档非常不方便,因此希望将其部署到内网,方便使用,查了很多资料找到了方法,分享一下。如果嫌麻烦可以直接下载资源:
https://download.csdn.net/download/artemis_qin/15385367?spm=1001.2014.3001.5501

获取官方文档github地址并下载

在element-ui官网可以很方便的找到github地址:https://github.com/ElemeFE/element.

下载后解压得到element-dev文件夹。

本地安装部署

  1. 安装:

    npm install
    
  2. 部署:
    查看项目的package.json文件能够看到可以运行的命令,其中如下命令可以进行部署

    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME"
    

    运行命令:

    npm run deploy:build
    

    运行完后生成的打包文件目录是:examples/element-ui

  3. 打开页面:
    进入element-ui文件夹,双击打开index.html,在没有外网的情况下发现页面白屏。打开开发者工具会发现部分css和js无法获取到。

  4. 配置公共css、js
    需要在外网环境下将缺少的css、js下载,路径可以根据index.html获取。

    <link rel="stylesheet" href="//at.alicdn.com/t/font_137970_p1tpzmomxp9cnmi.css"><link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css"><script src="//shadow.elemecdn.com/npm/vue@2.5.21/dist/vue.runtime.min.js"></script><script src="//shadow.elemecdn.com/npm/vue-router@3.0.1/dist/vue-router.min.js"></script><script src="//shadow.elemecdn.com/app/element/highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js"></script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    

    在element-ui目录下新建common目录,将下载的上述文件放入其中(目录可以自行修改,路径匹配即可)。
    打开element-ui目录下的index.html,修改上述文件的路径,修改后如下:

    <link rel="stylesheet" href="common/font_137970_p1tpzmomxp9cnmi.css"><link rel="stylesheet" href="common/color-brewer.css"><script src="common/vue.runtime.min.js"></script><script src="common/vue-router.min.js"></script><script src="common/highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js"></script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','common/analytics.js','ga');
    

    再次打开浏览器,发现页面正常。

参考:http://96fc18.coding-pages.com/elementUI%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3%E5%86%85%E7%BD%91%E9%83%A8%E7%BD%B2.html

element-ui 官方文档内网部署方法相关推荐

  1. python文档整理,Python官方文档内置函数整理Word版

    <Python官方文档内置函数整理Word版>由会员分享,可在线阅读,更多相关<Python官方文档内置函数整理Word版(6页珍藏版)>请在人人文库网上搜索. 1.传播优秀W ...

  2. Apache Impala —— 3.4.0版本官方文档百度网盘下载链接

    百度网盘链接: https://pan.baidu.com/s/18OW28Qp–5nEhmwpNosnCw 提取码:pfhw 文档目录内容

  3. Flutter 布局 - UI - 官方文档 - 学习速记(一)

    设置crossAxisAlignment属性值为CrossAxisAlignment.start,这会将该列中的子项左对齐. 获取主题色:Theme.of(context).primaryColor; ...

  4. python帮助文档中查看内置函数_PYTHON官方文档内置函数整理

    一.数学运算类 abs(x) 求绝对值 1 .参数可以是整型,也可以是复数 2 .若参数是复数,则返回复数的模 complex([real[, imag]]) 创建一个复数 divmod(a, b) ...

  5. 获取go语言官方文档的两个方法

    获取go文档 1.ide中终端输入 godoc -http :8888 然后在localhost:8888可以获取文档2.其他标准库 https://studygolang.com/pkgdoc

  6. spring 官方文档 pdf 版下载方法

    可以通过浏览器方便的查看 spring 文档,比如: https://docs.spring.io/spring/docs/5.1.x/spring-framework-reference/ 但是网页 ...

  7. MySQL8.0.28安装教程全程参考MySQL官方文档

    MySQL8.0.28详细安装教程.提供了Windows10下安装MariaDB与MySQL8.0同时共存的方法,以及Linux发行版Redhat7系列安装MySQL8.0详细教程.Windows10 ...

  8. 最新Elasticsearch8.4.3 + Kibana8.4.3在云服务器Centos7.9安装部署(参考官方文档)

    一.前言   最近笔者学习Elasticsearch,官方最新稳定版为 Elasticsearch-8.4.3,想在云服务器上Centos7.9搭建.搭建之路坑多路少啊(指网上的博文教程五花八门,基本 ...

  9. 使用cephadm部署单节点ceph集群,后期可扩容(基于官方文档,靠谱,读起来舒服)

    目录 ceph各种部署工具比较(来自官方文档的翻译,靠谱!) 材料准备 cephadm使用条件 服务器有外网访问能力 服务器没有外网访问能力 安装cephadm cephadm的功能 两种安装方式 基 ...

最新文章

  1. [物理学与PDEs]第2章习题13 将 $p$ - 方程组化为守恒律形式的一阶拟线性对称双曲组...
  2. 简单的VC 操作XML 文件的的方法
  3. MINA与JMX集成(翻译)
  4. 机器学习第八篇:详解逻辑斯蒂回归算法
  5. 如何在Java中验证电话号码(正则表达式+ Google libphonenumber)
  6. 前端学习(586):在元素中动态添加类与伪类
  7. hadoop--HDFS的Shell相关操作
  8. java_eclipse中添加外部动态链接库(dll文件)的三种方式
  9. windows输入法打出的字母空隙很大怎么办?
  10. 成为全栈工程师的6个要素
  11. Windbg双机调试配置
  12. Mac OS Catalina 如何连接老旧的惠普 HP Laser Jet 1020 plus 打印机
  13. matlab如何制造魔方矩阵,【1011】魔方矩阵的学习
  14. mysql 性能指标计算_干货|MySQL 性能指标及计算方法总结
  15. java工资高还是web前端工资高_java工资高还是php,java工资高还是web前端工资高,php和java学费...
  16. 笔记本电脑切换Fn功能键
  17. 一个人流浪,不必去远方
  18. ‘vue‘ 不是内部或外部命令,也不是可运行的程序或批处理文件
  19. html自动缩放不出现滚动条,HTML页面缩小后显示滚动条的示例代码
  20. OSChina 周四乱弹 —— 作为黑洲非人都不能玩游戏了

热门文章

  1. JAVA实现多线程的三种方式
  2. CC2640R2F学习笔记(16)——SNV Flash使用
  3. 【GDOI2018Day2模拟4.18】奥利卡的诗
  4. 手头有65万存款,想在广州买房,买南沙好还是黄埔好?
  5. journal查看日志相关
  6. 外界键盘win键失灵的解决方法
  7. 使用jackson解析json数据详讲
  8. C语言结构体的定义与使用、结构体数组、指向结构体的指针(有代码详解)
  9. java将数据库数据转换成word文档并且生成pdf文件
  10. 如何避免循环查询数据库_与数据库无关的查询是不可避免的