解決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'} 則表示用戶放棄上傳
// 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 格式字符串!??!否則報(bào)錯(cuò)
},
}
editor.create();
},
}
以上這篇解決vue項(xiàng)目中的Invalid Host header問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue.draggable實(shí)現(xiàn)表格拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vue.draggable實(shí)現(xiàn)表格拖拽排序效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
在vue項(xiàng)目中優(yōu)雅的使用SVG的方法實(shí)例詳解
本文旨在介紹如何在項(xiàng)目中配置和方便的使用svg圖標(biāo)。本文以vue項(xiàng)目為例給大家介紹在vue項(xiàng)目中優(yōu)雅的使用SVG的方法,需要的朋友參考下吧2018-12-12
vscode 開(kāi)發(fā)Vue項(xiàng)目的方法步驟
這篇文章主要介紹了vscode 開(kāi)發(fā)Vue項(xiàng)目的方法步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
關(guān)于Vue?CLI3中啟動(dòng)cli服務(wù)參數(shù)說(shuō)明
這篇文章主要介紹了關(guān)于Vue?CLI3中啟動(dòng)cli服務(wù)參數(shù)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue中vee validate表單校驗(yàn)的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下2018-06-06

