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配置上的路徑和轉換。