记录vue-element-admin登陆以及打包流程

作为一名资深菜鸟，近日被领导要求做一个vue前端，小白没接触过vue，只能硬着头皮上了，挑战自己，上网搜索后选用vue-element-admin作为前端框架，网上资源多，有问题好解决。。。

下载安装

克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git

进入项目目录

cd vue-element-admin

这里需要用到npm，由于我之前安装过，所以不再重复安装
直接启动
#本地开发 启动项目

npm run dev

在浏览器输入http://localhost:9527 就能看到效果，我这个项目还有跨域的问题，所以一开始还要在谷歌浏览器中设置跨域访问

修改登陆页

感觉登陆页面不美观，先加个背景图片再说

准备自己喜欢的图片放到文件夹

vue-element-admin\src\assets\loginback.jpg

然后更改代码
打开文件

vue-element-admin\src\views\login\index.vue

找到.login-container添加代码

.login-container {
     width: 100%;
     height: 100%;
     background-image: url("../../assets/loginback.jpg");
     background-size: cover;
     background-position: center;
     position: relative;

     .login-form {
   	...
	 }
 }

效果图

我这里已经将页面上不需要的东西都注释了，现在修改登陆逻辑
查找到登陆页的登陆按钮，找到这段代码

发现通过‘user/login’去处理登陆，在store文件夹下查找
最后找到文件位置

vue-element-admin\src\store\modules\user.js 

但是发现好像还是没有找到关键函数，于是继续查找，在此文件的头部发现这行代码

import { login, logout, getInfo } from '@/api/user'

果然在这个文件下找到了关键代码，连忙将url更改为后端接口 ，后端接口需要用token去获取用户信息以及注销登陆，所以其他两个我都一并修改了。

再次尝试登陆，发现还是无法成功，查看network后发现地址不对，url不是我修改的那个，于是再次上网搜搜搜，最后搜到结果，要修改三个文件的url

将这三个文件中的VUE_APP_BASE_API都改为后端接口。
再将vue.config.js中的before: require(’./mock/mock-server.js’)注释掉

这下登陆成功了，但是头像没显示出来，用户名也不是我登陆的，再找！
还是在这个文件下

vue-element-admin\src\store\modules\user.js 

因为头像和用户权限，后端没有提供，那就自己写死吧

妈耶，太累了，将自己的业务代码写好之后，发现token又出问题了，退出重新登陆后，发现上一个token还在，退出的时候明明清除token了，再找！

尝试了一天无果后，决定先在每个函数引用时重新查询一次token，这个坑只能慢慢填了 TAT

const token = this.$store.getters.token;

这下不出错了，心累。

打包

大大小小的都改的差不多了，先打包试试，万一又出错呢，毕竟菜鸟要掉的坑还多着呢
在项目文件夹执行

npm run build:prod 

成功后会在项目文件夹下出现一个dist文件

双击index.html打开后发现一片空白，再搜搜，发现是路径问题，于是找到vue.config.js将publicPath的路径改为图中所示

但是！提示又说geToken未定义，我累了，再找！

发现打包后的文件走的是mock文件，mock只是模拟数据，我已经更改过了，为啥还会走mock，搜索无果，经大佬提示后，才知犯了一个低级错误，打包后的文件不能用直接打开的形式，必须通过服务器部署。。。。

将dist扔到本地nginx服务中，运行-------
终于没报错了，哭了，菜鸟要掉的坑真是太多了，记录一下这一周的茶饭不思。