書接上回，我于是使用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頁面的所需要的文件都拿了過來。打開之后頁面目前是這個樣子
這個登錄頁面像點樣子了讨盒，我們就從這里開始著手吧！
修復驗證碼顯示不出來
首先是驗證碼沒有加載出來步责，查看控制臺發(fā)現(xiàn)如下情況
在src那里有一個undefined返顺，查看源代碼發(fā)現(xiàn)
這里需要一個環(huán)境變量 process.env.VUE_APP_BASE_API
于是想到需要把
移植過來,并且在vue.config.js里面配置了一些根路徑。
查看代碼：修復驗證碼不顯示
此時驗證碼出來了
修復圖標不加載的問題
經(jīng)過對比發(fā)現(xiàn)下面的圖標都沒有加載出來
首先我先查閱了element-plus的圖標使用情況蔓肯，發(fā)現(xiàn)tmd大坑就是ele-p 的icon使用方式發(fā)生了改變
詳情查閱 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官網(wǎng)上查出來一些眉目。注意此時的.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的規(guī)范的调限，原作者也有寫到這個東西的作用:
于是刪除了這個東西舟陆，我們是webpack@5根本不需要他，上面的那個報錯就消失了,此時的代碼變成了這個樣子
查看代碼：修復配置文件錯誤導致的問題問題
然后icon還是不顯示我就查閱了源代碼發(fā)現(xiàn)這個icon是使用svg的方式進行使用的耻矮，秦躯，設計理念參考原作者博客的內(nèi)容https://juejin.cn/post/6844903517564436493
于是我開始進行了對svg的支持。
查看代碼：修復登錄頁圖標不顯示問題
此時圖標終于出來了
登錄功能開發(fā)
現(xiàn)在登錄界面都渲染出來了裆装，下一步的工作就是點擊登錄按鈕進行登錄操作了踱承，于是我輸入了正確的賬號密碼和驗證碼，點擊登錄之后控制臺報了如下的錯：
于是開始跟蹤代碼哨免，拷貝相關代碼茎活。
過程中主要報了如下幾個錯誤
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.登錄出現(xiàn)下面的彈窗
出現(xiàn)這個是在網(wǎng)絡請求的時候，校驗參數(shù)不通過琢唾。我這里出現(xiàn)這個問題是由于這里寫錯了
request({
url: `${process.env.VUE_APP_BASE_AUTH_PATH}/oauth/token`,
headers: {
isToken: false,
// 下面這個寫錯了導致參數(shù)
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);
});
經(jīng)過一番cv以及前端的一些基礎性操作载荔，終于把首頁搞出來了，請看代碼
首次登錄成功跳轉(zhuǎn)到了首頁
接下來請看文章4 對首頁的功能修復
