資料
正文（3.x）
1. 初次創(chuàng)建項(xiàng)目，控制臺(tái)報(bào)錯(cuò)(一直循環(huán)，真的惡心)
解決之后不知為何，錯(cuò)誤無(wú)法再次還原了
- 報(bào)錯(cuò)文字
Invalid Host/Origin header
[WDS] Disconnected!
- 解決參考地址
Vue thinks local IP address is global, causing several issues · Issue #1616 · vuejs/vue-cli
- 具體解決方法
- 在
vue.config.js配置文件中，添加devServer.disableHostCheck配置即可
module.exports = {
/**
* 接口代理配置
* 如果你的前端應(yīng)用和后端 API 服務(wù)器沒有運(yùn)行在同一個(gè)主機(jī)上，你需要在開發(fā)環(huán)境下將 API 請(qǐng)求代理到 API 服務(wù)器。
* https://cli.vuejs.org/zh/config/#devserver-proxy
* https://github.com/chimurai/http-proxy-middleware#proxycontext-config
*/
devServer: {
disableHostCheck: true
},
}
2. 根據(jù)官網(wǎng)配置的 devServer.proxy 訪問(wèn)失敗，提示 404
- 依照官網(wǎng)的設(shè)置出現(xiàn)問(wèn)題
devServer: {
disableHostCheck: true,
proxy: {
'/dictpc': {
target: 'http://183.129.5.16:8080/dictpc',
ws: true, // proxy websockets
changeOrigin: true // needed for virtual hosted sites
}
}
},
依照如上設(shè)置，啟動(dòng)項(xiàng)目，直接
404
- 解決問(wèn)題
-
proxy增加pathRewrite設(shè)置即可，之后重啟項(xiàng)目（注意每次修改配置后必須得重新啟動(dòng)項(xiàng)目）
devServer: {
disableHostCheck: true,
proxy: {
'/dictpc': {
target: 'http://183.129.5.16:8080/dictpc',
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/dictpc': ''
}
}
}
},
3. sourcemap 默認(rèn)是開啟的，導(dǎo)致打包出來(lái)的 dist -> js 文件夾過(guò)大
- 發(fā)現(xiàn)問(wèn)題是在看今天(2019.1.15)新出的一款匿名社交產(chǎn)品 馬桶MT 官網(wǎng)的源碼時(shí)，下面是查看的截圖
馬桶源碼查看截圖
- 后來(lái)發(fā)現(xiàn)我之前用的時(shí)候也沒注意過(guò)這個(gè)問(wèn)題耶，/尷尬
- 解決問(wèn)題
- 官網(wǎng)提供了專門的配置解決這個(gè)問(wèn)題
- 具體實(shí)施：在
vue.config.js的module.exports中加入下面的配置
productionSourceMap: false
4. .vue 文件中使用了沒寫內(nèi)容的 script 和 style 空標(biāo)簽導(dǎo)致的 bug
-
script沒寫內(nèi)容
- 源碼示例
<script>
</script>
-
bug文字描述
Cannot set property 'render' of undefined
- 解決方法
- 在里面寫上內(nèi)容
export default {} - 刪掉
script標(biāo)簽
-
script沒寫內(nèi)容
- 源碼示例
<style lang="stylus">
@import './style/common'
</style>
- 這樣導(dǎo)致的問(wèn)題
打包出現(xiàn)空的 `css` 文件
后端java一起上傳至服務(wù)器時(shí)，空文件并沒有被上傳上去，頁(yè)面訪問(wèn)時(shí)該css資源404，且使用該資源的路由對(duì)應(yīng)的頁(yè)面腳本會(huì)因?yàn)槲募也坏蕉鴪?bào)錯(cuò)，該路由頁(yè)面會(huì)直接打不開
- 解決方法
- 直接刪掉
style標(biāo)簽即可
5. 依照官網(wǎng)結(jié)構(gòu)寫的 store 目錄結(jié)構(gòu)，導(dǎo)致頁(yè)面出錯(cuò)
- 錯(cuò)誤文本
[vuex] unknown mutation type: updateVipCard
- 錯(cuò)誤原因
官方文檔 - 命名空間
購(gòu)物車示例中，由于需要 "具有更高的封裝度和復(fù)用性，你可以通過(guò)添加namespaced: true的方式使其成為帶命名空間的模塊。"，但是我的業(yè)務(wù)暫時(shí)沒有這個(gè)需求也用這個(gè)了，造成了報(bào)錯(cuò)
export default {
state,
getters,
actions,
mutations
}
- 解決方法
刪掉代碼中的
namespaced: true
6. 每次 yarn serve 運(yùn)行項(xiàng)目時(shí)，控制臺(tái)會(huì)出現(xiàn)一些警告
1. 問(wèn)題一
-
警告內(nèi)容
No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred. -
問(wèn)題解析
參考文章
)
參考如上文章的內(nèi)容，結(jié)論是vue-loader的版本問(wèn)題，我看了下項(xiàng)目?jī)?nèi)部package.json使用的版本是14.2.2 -
問(wèn)題解決
先去 github - vue-loader 上看了下最新的版本號(hào)，在命令行中升級(jí)
vue-loader的版本yarn upgrade vue-loader@15.7.1 重新啟動(dòng)項(xiàng)目問(wèn)題已解決了
2. 問(wèn)題二
-
警告內(nèi)容
caniuse-lit e is outdated. Please run next command `yarn upgrade caniuse-lite browserslist` -
問(wèn)題解析
參考文章
參考如上文章的內(nèi)容，結(jié)論是 刪除yarn.lockyarn install -
問(wèn)題解決
刪除
yarn.lock文件和node_modules目錄，再執(zhí)行yarn重新安裝項(xiàng)目中的依賴（需要注意的是這里默認(rèn)安裝的是所有依賴的最新版本）yarn 重新啟動(dòng)項(xiàng)目問(wèn)題已解決了
正文（4.x）舊項(xiàng)目升級(jí)問(wèn)題記錄
1. 文件命名造成的引用失敗的問(wèn)題
image.png
- 如上所示的報(bào)錯(cuò)，具體代碼以及目錄結(jié)構(gòu)如下
image.png
image.png
之前舊項(xiàng)目是沒有這樣的錯(cuò)誤的，所以我猜測(cè)是命名的問(wèn)題導(dǎo)致的。
首先我改成如下這樣時(shí)就是好用的
image.png
- 接著我嘗試修改組件目錄中文件的名稱
Index => index就是把首字母的大寫改成小寫，然后再重啟代碼，bingo?。。?wèn)題果然沒有了
2. Critical dependency: the request of a dependency is an expression
參考文章：如何解決 Critical dependency: the request of a dependency is an expression ？
依照上述文章內(nèi)容，這個(gè)錯(cuò)誤源自webpack的版本問(wèn)題，高版本的不可以在import中使用變量
- 下圖中是修復(fù)前和修復(fù)后的代碼對(duì)比圖
image.png
