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

由于公司开发处于内网环境，查看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