element-ui 官方文档内网部署方法
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文件夹。
本地安装部署
安装:
npm install
部署:
查看项目的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
打开页面:
进入element-ui文件夹,双击打开index.html,在没有外网的情况下发现页面白屏。打开开发者工具会发现部分css和js无法获取到。配置公共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 官方文档内网部署方法相关推荐
- python文档整理,Python官方文档内置函数整理Word版
<Python官方文档内置函数整理Word版>由会员分享,可在线阅读,更多相关<Python官方文档内置函数整理Word版(6页珍藏版)>请在人人文库网上搜索. 1.传播优秀W ...
- Apache Impala —— 3.4.0版本官方文档百度网盘下载链接
百度网盘链接: https://pan.baidu.com/s/18OW28Qp–5nEhmwpNosnCw 提取码:pfhw 文档目录内容
- Flutter 布局 - UI - 官方文档 - 学习速记(一)
设置crossAxisAlignment属性值为CrossAxisAlignment.start,这会将该列中的子项左对齐. 获取主题色:Theme.of(context).primaryColor; ...
- python帮助文档中查看内置函数_PYTHON官方文档内置函数整理
一.数学运算类 abs(x) 求绝对值 1 .参数可以是整型,也可以是复数 2 .若参数是复数,则返回复数的模 complex([real[, imag]]) 创建一个复数 divmod(a, b) ...
- 获取go语言官方文档的两个方法
获取go文档 1.ide中终端输入 godoc -http :8888 然后在localhost:8888可以获取文档2.其他标准库 https://studygolang.com/pkgdoc
- spring 官方文档 pdf 版下载方法
可以通过浏览器方便的查看 spring 文档,比如: https://docs.spring.io/spring/docs/5.1.x/spring-framework-reference/ 但是网页 ...
- MySQL8.0.28安装教程全程参考MySQL官方文档
MySQL8.0.28详细安装教程.提供了Windows10下安装MariaDB与MySQL8.0同时共存的方法,以及Linux发行版Redhat7系列安装MySQL8.0详细教程.Windows10 ...
- 最新Elasticsearch8.4.3 + Kibana8.4.3在云服务器Centos7.9安装部署(参考官方文档)
一.前言 最近笔者学习Elasticsearch,官方最新稳定版为 Elasticsearch-8.4.3,想在云服务器上Centos7.9搭建.搭建之路坑多路少啊(指网上的博文教程五花八门,基本 ...
- 使用cephadm部署单节点ceph集群,后期可扩容(基于官方文档,靠谱,读起来舒服)
目录 ceph各种部署工具比较(来自官方文档的翻译,靠谱!) 材料准备 cephadm使用条件 服务器有外网访问能力 服务器没有外网访问能力 安装cephadm cephadm的功能 两种安装方式 基 ...
最新文章
- [物理学与PDEs]第2章习题13 将 $p$ - 方程组化为守恒律形式的一阶拟线性对称双曲组...
- 简单的VC 操作XML 文件的的方法
- MINA与JMX集成(翻译)
- 机器学习第八篇:详解逻辑斯蒂回归算法
- 如何在Java中验证电话号码(正则表达式+ Google libphonenumber)
- 前端学习(586):在元素中动态添加类与伪类
- hadoop--HDFS的Shell相关操作
- java_eclipse中添加外部动态链接库(dll文件)的三种方式
- windows输入法打出的字母空隙很大怎么办?
- 成为全栈工程师的6个要素
- Windbg双机调试配置
- Mac OS Catalina 如何连接老旧的惠普 HP Laser Jet 1020 plus 打印机
- matlab如何制造魔方矩阵,【1011】魔方矩阵的学习
- mysql 性能指标计算_干货|MySQL 性能指标及计算方法总结
- java工资高还是web前端工资高_java工资高还是php,java工资高还是web前端工资高,php和java学费...
- 笔记本电脑切换Fn功能键
- 一个人流浪,不必去远方
- ‘vue‘ 不是内部或外部命令,也不是可运行的程序或批处理文件
- html自动缩放不出现滚动条,HTML页面缩小后显示滚动条的示例代码
- OSChina 周四乱弹 —— 作为黑洲非人都不能玩游戏了