书接上回，我于是使用vue-cli@5 搭建了一套vue3+vuex+vuerouter+eslint+pretter的框架，这里没有选择vite,也没有选择ts，vite的话总觉得还是不太成熟，虽然编译的快但是这个项目说起来也不算太大，编译起来用webpack也不算慢，ts的话移植代码太复杂了，生成代码的过程就不记录了，总之生成的代码是这个样子的
https://gitee.com/hanlin_wang0606/vue-element-admin-level/tree/%E5%88%9D%E5%A7%8B%E5%8C%96%E5%B7%A5%E7%A8%8B/
下面的每一次修复，我都会提交并且打上一个tag，方便各位老铁们查看。
初始化工程
初始化的工程我增加了一点东西，引入了element-plus 引入了axios，增加了一个路由login，用来指向login页面，同时把login页面的所需要的文件都拿了过来。打开之后页面目前是这个样子
这个登录页面像点样子了，我们就从这里开始着手吧！
修复验证码显示不出来
首先是验证码没有加载出来，查看控制台发现如下情况
在src那里有一个undefined，查看源代码发现
这里需要一个环境变量 process.env.VUE_APP_BASE_API
于是想到需要把
移植过来,并且在vue.config.js里面配置了一些根路径。
查看代码：修复验证码不显示
此时验证码出来了
修复图标不加载的问题
经过对比发现下面的图标都没有加载出来
首先我先查阅了element-plus的图标使用情况，发现tmd大坑就是ele-p 的icon使用方式发生了改变
详情查阅 https://element-plus.gitee.io/zh-CN/component/icon.html
我按着文档增加了一个@element-plus/icons-vue
npm install @element-plus/icons-vue
重启项目后我做了一个操作，删除了node_moudles,然后重新npm install 一下 之后启动login页面就报错了
app.js:358 Uncaught ReferenceError: require is not defined
at eval (index.mjs:4:30)
at Module../node_modules/@element-plus/icons-vue/dist/es/index.mjs (chunk-vendors.js:9072:1)
at __webpack_require__ (app.js:355:33)
at fn (app.js:600:21)
at eval (icon.js:7:16)
at Object../node_modules/element-plus/lib/utils/vue/icon.js (chunk-vendors.js:7646:1)
at __webpack_require__ (app.js:355:33)
at fn (app.js:600:21)
at Object../node_modules/element-plus/lib/utils/vue/index.js (chunk-vendors.js:7665:12)
at __webpack_require__ (app.js:355:33)
注意，一定是要按照我上面的操作才会报错。这个错我查询了，最终在webpack官网上查出来一些眉目。注意此时的.env.development文件是这样的
ENV = 'development'
VUE_APP_BASE_API = '/rdp-cloud'
# rdp begin
#VUE_APP_BASE_URL = 'http://localhost:8081/rdp'
#VUE_APP_BASE_AUTH_PATH = ''
# rdp end
# rdp-cloud begin
VUE_APP_BASE_URL = 'http://localhost:8080'
VUE_APP_BASE_AUTH_PATH = '/auth'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# rdp-cloud end
VUE_CLI_BABEL_TRANSPILE_MODULES这个东西是不符合webpack@5的规范的，原作者也有写到这个东西的作用:
于是删除了这个东西，我们是webpack@5根本不需要他，上面的那个报错就消失了,此时的代码变成了这个样子
查看代码：修复配置文件错误导致的问题问题
然后icon还是不显示我就查阅了源代码发现这个icon是使用svg的方式进行使用的，，设计理念参考原作者博客的内容https://juejin.cn/post/6844903517564436493
于是我开始进行了对svg的支持。
查看代码：修复登录页图标不显示问题
此时图标终于出来了
登录功能开发
现在登录界面都渲染出来了，下一步的工作就是点击登录按钮进行登录操作了，于是我输入了正确的账号密码和验证码，点击登录之后控制台报了如下的错：
于是开始跟踪代码，拷贝相关代码。
过程中主要报了如下几个错误
1.path-browserify缺失
webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
解决方案上面都写了：
npm install -D path-browserify
//vue.config.js这部分加上 path: require.resolve("path-browserify") 代码即可
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: defaultSettings.title,
resolve: {
alias: {
path: require.resolve("path-browserify"),
},
},
},
2.element-ui引入错误
Can't resolve 'element-ui' in xxx
//解决方案找到这个文件 把element-ui 改成element-plus 并且修改对应组件的引用
3.部分语法不兼容
v-model:value修改v-model
/deep/ xxx修改为&:deep
v-model:visible 修改为 v-model
4.缺失screenfull 直接npm install screenfull即可
'tag' property on 'router-link' component is deprecated. Use scoped slots instead
6.登录出现下面的弹窗
出现这个是在网络请求的时候，校验参数不通过。我这里出现这个问题是由于这里写错了
request({
url: `${process.env.VUE_APP_BASE_AUTH_PATH}/oauth/token`,
headers: {
isToken: false,
// 下面这个写错了导致参数
Authorization: "Basic cmRwOjE=",
},
method: "post",
params: sysLoginForm,
})
.then((data) => {
// const {data} = response
commit("SET_TOKEN", data.access_token);
setToken(data.access_token);
resolve();
})
.catch((error) => {
reject(error);
});
经过一番cv以及前端的一些基础性操作，终于把首页搞出来了，请看代码
首次登录成功跳转到了首页
接下来请看文章4 对首页的功能修复
