vue-element-admin 从运行到打包部署到线上教程

不念不忘少年蓝@ 2022-12-19 03:37 503阅读 0赞

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

推荐指数：star:55k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][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][https_github.com_PanJiaChen_vue-element-admin]  
我这里使用简单粗暴的方式，直接下点击载按钮  
![6c42a059b3b103b70cb1d730ac65caf5.png][]

2：使用vscode打开，进入项目目录`cd vue-element-admin`，并且在项目里面安装依赖。

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

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

![22e7f2ce3163abe7c2a1939901b0f74a.png][]

安装完成会发现项目目录中多了一个依赖文件夹  
![a8b3d4203077b7363b6c4b00ef806538.png][]

3：运行本地开发 启动项目

npm run dev

![5272b7a004cb5dd0c72cb54821d6ec78.png][]

4：浏览器打开  
运行成功就使用浏览器打开  
http://localhost:9527/  
![b0221a4380ded43c794c3e90a204e48f.png][]

可以在这个后台管理系统的模板的基础上，修改一些自己需要的代码，变成自己的开发的项目了，此处自行发挥，省略一万字。

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

5：打包成静态文件  
做好项目之后，需要开始打包了，打包成一个dist静态文件夹。

npm run build:prod
    （prod 对应的是生成环境的配置内容）

![5fc03c62ccf17d934af02c12a28687e4.png][]

打包成功之后  
会出现一个这样的dist文件夹  
![f91090eccb5ede34dc81fe46c9194a8a.png][]

6：查看本地index.html，在本地打开  
选择在默认的浏览器打开  
![2f57f4b9c8556e105d4a5c609f4f069b.png][]

但是这个时候  
我们会发现空白页  
怎么办？  
打开f12来看一下是什么情况吧

这里的报错是这样的

![f171b465fd3cbd105b64f7d635a77874.png][]

解决办法

正常vue项目是要修改 config文件夹下的index.js 可是vue-element-admin项目没有这个文件  
那就找到并且打开vue.config.js

将 publicPath: ‘/’,改成 publicPath: ‘./’,

![c8b158012853bbcd4f4d4129bf3ba23d.png][]

再次执行，npm run build:prod命令  
重新打包  
这个时候，就可以直接在本地打开静态文件dist里面的index.html页面了。

![54ab53a32c38655db6f3174c42660452.png][]

注意：  
如果修改了路径，点击登录按钮，还是不能跳转的话，可以考虑一下修改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
    })

![91c37fb1065956a92c37e73996e85073.png][]

改完后再打包一次即可

7：部署  
部署这里，需要后端搭建好环境  
我这里是一件搭建好的环境  
使用ftp链接到服务器的根目录底下  
我在根目录底下新建了一个文件夹ChemHtml  
然后将dist静态文件夹里面的内容拷贝到ChemHtml里面

![09ed998ac82fad4b9063c38b4bb0beea.png][]

最后访问  
服务器的主机ip地址我就加一下马赛克啦。  
![74456624ee74ea7399495aaec7ba19ec.png][]

好了，完结，散花，准备下班！！  
各位路过的小哥哥，小姐姐，喜欢的就点个赞呗。

![欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。][500G]

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[image]: /images/20221120/dd522a9feb5645c58e455b2eb86590db.png
[6c42a059b3b103b70cb1d730ac65caf5.png]: /images/20221120/21d34875dde34c649c57f9559d41a0bc.png
[22e7f2ce3163abe7c2a1939901b0f74a.png]: /images/20221120/4a3d053052b04d31b7a29dd209fbc1a4.png
[a8b3d4203077b7363b6c4b00ef806538.png]: /images/20221120/fec1f01e50534869bc942ad5f7085c16.png
[5272b7a004cb5dd0c72cb54821d6ec78.png]: /images/20221120/992c9ea73b084a9cb330ab7965a21c6e.png
[b0221a4380ded43c794c3e90a204e48f.png]: /images/20221120/f6a77a34e5e742468a7470fdef9c32f2.png
[5fc03c62ccf17d934af02c12a28687e4.png]: /images/20221120/cfbf9baaca9548869fe54251f9c7dcd5.png
[f91090eccb5ede34dc81fe46c9194a8a.png]: /images/20221120/a1ff5665126f4f33955bf21531dc7670.png
[2f57f4b9c8556e105d4a5c609f4f069b.png]: /images/20221120/51530d0bdd254be98313abfb81758c17.png
[f171b465fd3cbd105b64f7d635a77874.png]: /images/20221120/b996b995e67944cb8a3e912e411cae1a.png
[c8b158012853bbcd4f4d4129bf3ba23d.png]: /images/20221120/68aca25111754e118866132379082096.png
[54ab53a32c38655db6f3174c42660452.png]: /images/20221120/afb98d264db74fc6b658f48127ce2d39.png
[91c37fb1065956a92c37e73996e85073.png]: /images/20221120/f9e30b22909f48908dbcffd9e8666619.png
[09ed998ac82fad4b9063c38b4bb0beea.png]: /images/20221120/d1454f666ac14c0c880f80d2c7d2b2a3.png
[74456624ee74ea7399495aaec7ba19ec.png]: /images/20221120/0c8c0b06e0734eafb8bc4adb4c0af62a.png
[500G]: /images/20221120/1291db559f9e43adbd5a3bd1f8af51cc.png