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
  • 在element-ui目录下创建common目录，并把上面几个js文件放在其中

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

    原html为：

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

    修改成：

    <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配置上的路径和转换。