vue-element-admin一個基于 vue2.0 和 Eelement 的控制面板 UI 框架，這是使用vue技術棧開發的前端程序員的首選管理系統模板，模板以及非常的成熟了，并且有相關的社區和維護人員，開發時候遇到問題也不要慌。

推薦指數：star:55k
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo體驗：https://panjiachen.github.io/vue-element-admin/#/dashboard

文檔：https://panjiachen.github.io/vue-element-admin-site/zh/

image

今天就來說一下，怎使用這個模板，以及寫好了項目，怎么樣把項目打包成靜態文件，部署在服務器上。

1：去github上面下載或者克隆
Github 地址：https://github.com/PanJiaChen/vue-element-admin
我這里使用簡單粗暴的方式，直接下點擊載按鈕

2：使用vscode打開，進入項目目錄cd vue-element-admin，并且在項目里面安裝依賴。

npm install --registry=https://registry.npm.taobao.org

建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題

安裝完成會發現項目目錄中多了一個依賴文件夾

3：運行本地開發 啟動項目

npm run dev

4：瀏覽器打開
運行成功就使用瀏覽器打開
http://localhost:9527/

可以在這個后臺管理系統的模板的基礎上，修改一些自己需要的代碼，變成自己的開發的項目了，此處自行發揮，省略一萬字。

=============

5：打包成靜態文件
做好項目之后，需要開始打包了，打包成一個dist靜態文件夾。

npm run build:prod
（prod 對應的是生成環境的配置內容）

打包成功之后
會出現一個這樣的dist文件夾

6：查看本地index.html，在本地打開
選擇在默認的瀏覽器打開

但是這個時候
我們會發現空白頁
怎么辦？
打開f12來看一下是什么情況吧

這里的報錯是這樣的

解決辦法

正常vue項目是要修改 config文件夾下的index.js 可是vue-element-admin項目沒有這個文件
那就找到并且打開vue.config.js

將 publicPath: '/',改成 publicPath: './',

再次執行，npm run build:prod命令
重新打包
這個時候，就可以直接在本地打開靜態文件dist里面的index.html頁面了。

注意：
如果修改了路徑，點擊登錄按鈕，還是不能跳轉的話，可以考慮一下修改router/index.js里面的路由

將

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

改成

const createRouter = () => new Router({
  mode: 'hash', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

改完后再打包一次即可

7：部署
部署這里，需要后端搭建好環境
我這里是一件搭建好的環境
使用ftp鏈接到服務器的根目錄底下
我在根目錄底下新建了一個文件夾ChemHtml
然后將dist靜態文件夾里面的內容拷貝到ChemHtml里面

最后訪問
服務器的主機ip地址我就加一下馬賽克啦。

好了，完結，散花，準備下班！！
各位路過的小哥哥，小姐姐，喜歡的就點個贊唄。

歡迎關注【編程微刊】公眾號，回復【領取資源】,500G編程學習資源干貨免費送。