解決vue項(xiàng)目中出現(xiàn)Invalid Host header的問(wèn)題
在vue-cli版本為2.x的情況下修改webpack.dev.conf.js中的devServer對(duì)象加入disableHostCheck: true
devServer: { disableHostCheck: true, }
vue-cli版本3.0的情況下修改vue.config.js的配置
module.exports = { devServer: { disableHostCheck: true } }
補(bǔ)充知識(shí):vue中使用wangeditor富文本編輯器
1.先下載 編輯器
cnpm install wangeditor --save
2.用法:
2.1、html用來(lái)放編輯器
<div id="editor"> <p v-model="info">請(qǐng)輸入內(nèi)容</p>//占位符 </div>
2.2、js部分
var E = require('wangeditor') ; / import E from 'wangeditor' export default{ mounted () { var editor = new E('#editor'); editor.customConfig.uploadImgServer = '';//上傳圖片的后臺(tái)地址 editor.customConfig.uploadFileName = 'UploadForm[imageFile]'; editor.customConfig.uploadImgHooks = { before: function (xhr, editor, files) { // 圖片上傳之前觸發(fā) // xhr 是 XMLHttpRequst 對(duì)象,editor 是編輯器對(duì)象,files 是選擇的圖片文件 // 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶(hù)放棄上傳 // return { // prevent: true, // msg: '放棄上傳' // } }, success: function (xhr, editor, result) { // 圖片上傳并返回結(jié)果,圖片插入成功之后觸發(fā) // xhr 是 XMLHttpRequst 對(duì)象,editor 是編輯器對(duì)象,result 是服務(wù)器端返回的結(jié)果 console.log(result); }, fail: function (xhr, editor, result) { // 圖片上傳并返回結(jié)果,但圖片插入錯(cuò)誤時(shí)觸發(fā) // xhr 是 XMLHttpRequst 對(duì)象,editor 是編輯器對(duì)象,result 是服務(wù)器端返回的結(jié)果 alert('圖片插入失敗') // 圖片插入失敗時(shí)返回 }, error: function (xhr, editor) { // 圖片上傳出錯(cuò)時(shí)觸發(fā) // xhr 是 XMLHttpRequst 對(duì)象,editor 是編輯器對(duì)象 // 此處好像是,訪問(wèn)請(qǐng)求不通的時(shí)候,執(zhí)行的,ajax的error console.log('上傳出錯(cuò)') }, timeout: function (xhr, editor) { // 圖片上傳超時(shí)時(shí)觸發(fā) // xhr 是 XMLHttpRequst 對(duì)象,editor 是編輯器對(duì)象 console.log('上傳超時(shí)') }, // 如果服務(wù)器端返回的不是 {errno:0, data: [...]} 這種格式,可使用該配置 // (但是,服務(wù)器端返回的必須是一個(gè) JSON 格式字符串!??!否則會(huì)報(bào)錯(cuò)) customInsert: function (insertImg, result, editor) { // 圖片上傳并返回結(jié)果,自定義插入圖片的事件(而不是編輯器自動(dòng)插入圖片?。。。? // insertImg 是插入圖片的函數(shù),editor 是編輯器對(duì)象,result 是服務(wù)器端返回的結(jié)果 // 上傳成功后,可以監(jiān)聽(tīng)返回結(jié)果,可以處理土圖片插入 if ( result.status==200) { insertImg(result.data) }else{ console.log(result.message) } // 舉例:假如上傳圖片成功后,服務(wù)器端返回的是 {url:'....'} 這種格式,即可這樣插入圖片: // console.log(result); // var url = result.url // insertImg(url) // result 必須是一個(gè) JSON 格式字符串?。。》駝t報(bào)錯(cuò) }, } editor.create(); }, }
以上這篇解決vue項(xiàng)目中的Invalid Host header問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vuejs 動(dòng)態(tài)添加input框的實(shí)例講解
今天小編就為大家分享一篇vuejs 動(dòng)態(tài)添加input框的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue中使用極驗(yàn)驗(yàn)證碼的方法(附demo)
這篇文章主要介紹了vue中使用極驗(yàn)驗(yàn)證碼的方法(附demo)本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Vue 3.0的attribute強(qiáng)制行為理解學(xué)習(xí)
這篇文章主要為大家介紹了Vue 3.0的attribute強(qiáng)制行為理解學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08vue使用腳手架vue-cli創(chuàng)建并引入自定義組件
這篇文章介紹了vue使用腳手架vue-cli創(chuàng)建并引入自定義組件的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟
隨著 Vite2 的發(fā)布并日趨穩(wěn)定,現(xiàn)在越來(lái)越多的項(xiàng)目開(kāi)始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟,感興趣的可以了解一下2021-07-07vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09