vue-element-admin 打包部署到线上服务器，五分钟就能搞定！

快来打我* 2023-02-27 05:42 5阅读 0赞

大家好，我是为前端娱乐圈操碎了心的小迷妹，每天推荐一个小工具/源码/知识点，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标。

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/

![format_png][]

今天就来说一下，怎使用这个模板，以及写好了项目，怎么样把项目打包成静态文件，部署在服务器上。

1：去github上面下载或者克隆  
Github 地址：https://github.com/PanJiaChen/vue-element-admin  
我这里使用简单粗暴的方式，直接下点击载按钮

![format_png 1][]

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

npm install --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org)

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

![format_png 2][]

安装完成会发现项目目录中多了一个依赖文件夹

![format_png 3][]

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

npm run dev

![format_png 4][]

4：浏览器打开  
运行成功就使用浏览器打开  
http://localhost:9527/

![format_png 5][]

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

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

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

![format_png 6][]

打包成功之后  
会出现一个这样的dist文件夹

![format_png 7][]

6：查看本地index.html，在本地打开  
选择在默认的浏览器打开

![format_png 8][]

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

这里的报错是这样的

![format_png 9][]

解决办法

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

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

![format_png 10][]

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

![format_png 11][]

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

![format_png 12][]

改完后再打包一次即可

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

![format_png 13][]

最后访问  
服务器的主机ip地址我就加一下马赛克啦。

![format_png 14][]

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

![format_png 15][]

[format_png]: /images/20230209/8001b2be203746bf9af48a592a55bf1a.png
[format_png 1]: /images/20230209/0b69c882e25f479999b6e310254c58fa.png
[format_png 2]: /images/20230209/26de76b0340344e1b224e7564995dc40.png
[format_png 3]: /images/20230209/ca71a553e5944edaac0db61a94d79055.png
[format_png 4]: /images/20230209/e59f25bc581d4111becaee01e6df45bc.png
[format_png 5]: /images/20230209/ac2543910f0f4d12a8630fbe349061dc.png
[format_png 6]: /images/20230209/4b084c7cac754ca08ded27d05d115a6d.png
[format_png 7]: /images/20230209/df1ff41be2ce4dbeb187dbc4a70c91f3.png
[format_png 8]: /images/20230209/99bdbff5ea694118930103cd3da391de.png
[format_png 9]: /images/20230209/2c442cedd7fe4e9f877cab23ed79abb5.png
[format_png 10]: /images/20230209/0b1dcbb7e4e947b29db848c154dbfc10.png
[format_png 11]: /images/20230209/e354abb57d5643cbbbb0c06f0754fda2.png
[format_png 12]: /images/20230209/6d61033960fc4759b04076e2958bc26d.png
[format_png 13]: /images/20230209/ebbb0170f2304d53935c6e47c0ea6e1f.png
[format_png 14]: /images/20230209/b58251ee4ffa4331808e98d3183ac176.png
[format_png 15]: /images/20230209/ec37f481913e4efc8c6bda2d49864553.png