ElementUI官方文档内网部署方法

背景

为了方便内网查看文档，克隆了一份elementUI的官方文档手册部署到内网，期间也遇到一些问题，记录一下。

内网部署方法

• 获取官方文档github地址并克隆

  在elementUI官网可以很方便的找到饿了么前端的的github地址：

  https://github.com/ElemeFE/el...

• 打包部署

  查看项目的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

• 获取打包后的文件

  运行完之后生成打包目录：example\element-ui

• 在element-ui目录启动静态http服务器（需安装npm install http-server）

  $ http-server
  Starting up http-server, serving ./
  Available on:
    http://127.0.0.1:8080
  Hit CTRL-C to stop the server

在没有外网的情况下，发现白屏了。打开开发者工具会发现有几个js获取不到。

• 配置公共js

  • 在外网环境下载这几个js文件：

    • vue-router.min.js
    • vue.runtime.min.js
    • highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js
    • color-brewer.css
    • font_137970_p1tpzmomxp9cnmi.css
  • 在element-ui目录下建立common目录，并把上面几个js和css文件放在其中

  • 打开element-ui目录下的index.html文件修改js路径

    原html为：

    // header 部分
    <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">
    
    // body 部分
    <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>

    修改为：

     <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>

注意：以上目录可自行修改，可以匹配上就可以了。

• 再次打开浏览器页面，发现页面正常了

总结

在静态网站搬运的时候尤其要注意打包路径的问题，如果在nginx上部署，也要注意下nginx配置上的路径和转换。