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/
今天就來說一下,怎使用這個模板,以及寫好了項目,怎么樣把項目打包成靜態文件,部署在服務器上。
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編程學習資源干貨免費送。