vue-element-admin 運行并且打包部署

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編程學習資源干貨免費送。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。