不用再上官網,自己部署一套ElementUI官方最新文件
阿新 • • 發佈:2020-09-16
> ElementUI官方的訪問速度一直很慢,公司內網也無法進行外網訪問。故研究了下最新的ElementUI API(2.13.2)部署教程。
## 先上效果圖
![image-20200916195313640](https://i.loli.net/2020/09/16/6mEPRTNinXsO5eo.png)
## ElementUI文件部署過程
1. 到github下載最新的elementui原始碼,這裡我使用git下載到本地
```shell
git clone https://github.com/ElemeFE/element.git
```
2. 下載之後到element目錄下安裝依賴
```shell
npm install
```
3. 分析了下目錄發現element的文件原始碼在examples目錄下
![image-20200916200005296](https://i.loli.net/2020/09/16/wIazcl7fveVWdFQ.png)
4. 再分析了下package.json,發現配置webpack.demo.js進行編譯examples文件
```
"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"
```
5. 最後使用npm執行下面命令即可以編譯examples下文件原始碼
```
npm run deploy:build
```
6. 編譯成功,在瀏覽器執行發現examples下的index.tpl引用了許多外網的js、css、svg資源
![image-20200916200424117](https://i.loli.net/2020/09/16/ai38KzgEDvkjuXQ.png)
7. 內網部署第三方資源肯定訪問不到,因此我手動把examples/index.tpl引用的第三方下載下來,下載下來的資源。並且把index.tpl改成相對於伺服器的路徑引用引用。
![image-20200916200615889](https://i.loli.net/2020/09/16/7UE8pbcRjOy1KM6.png)
![image-20200916200756527](https://i.loli.net/2020/09/16/7UE8pbcRjOy1KM6.png)
8. 最後把所有檔案部署在nginx上面,這裡我拿windows nginx舉例放在html的目錄下即可。
![image-20200916200928924](https://i.loli.net/2020/09/16/fvKlNVecwi8zLrQ.png)
**以上就是ElementUI最新API文件的部署過程,如果對你幫助的話,點贊、評論、轉發三連**
**更多資源與第一手部落格,請關注公眾號:程式設計師眾推,獲取。**
![](https://www.codehome.vip/wp-content/uploads/2020/08/1597015232-codeh