vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。
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](https://registry.npm.taobao.org)
建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
安装完成会发现项目目录中多了一个依赖文件夹
3：运行本地开发 启动项目
npm run dev
4：浏览器打开
运行成功就使用浏览器打开
可以在这个后台管理系统的模板的基础上，修改一些自己需要的代码，变成自己的开发的项目了，此处自行发挥，省略一万字。
=============
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地址我就加一下马赛克啦。
好了，完结，散花，准备下班！！
各位路过的小哥哥，小姐姐，喜欢的就点个赞呗。
