在vue-cli版本為2.x的情況下修改webpack.dev.conf.js中的devServer物件加入disableHostCheck: true

devServer: {
 disableHostCheck: true,}

vue-cli版本3.0的情況下修改vue.config.js的配置

module.exports = {
 devServer: {
 disableHostCheck: true
 }
}

補充知識：vue中使用wangeditor富文字編輯器

1.先下載 編輯器

cnpm install wangeditor --save

2.用法：

2.1、html用來放編輯器

<div id="editor">
  <p v-model="info">請輸入內容</p>//佔位符
 </div>

2.2、js部分

var E = require('wangeditor') ; / import E from 'wangeditor'
export default{
 mounted () {
  var editor = new E('#editor');
  editor.customConfig.uploadImgServer = '';//上傳圖片的後臺地址
  editor.customConfig.uploadFileName = 'UploadForm[imageFile]';
  editor.customConfig.uploadImgHooks = {
   before: function (xhr,editor,files) {
    // 圖片上傳之前觸發
    // xhr 是 XMLHttpRequst 物件，editor 是編輯器物件，files 是選擇的圖片檔案
    
    // 如果返回的結果是 {prevent: true,msg: 'xxxx'} 則表示使用者放棄上傳
    // return {
    //  prevent: true,//  msg: '放棄上傳'
    // }
   },success: function (xhr,result) {
    // 圖片上傳並返回結果，圖片插入成功之後觸發
    // xhr 是 XMLHttpRequst 物件，editor 是編輯器物件，result 是伺服器端返回的結果
    console.log(result);
   },fail: function (xhr,result) {
    // 圖片上傳並返回結果，但圖片插入錯誤時觸發
    // xhr 是 XMLHttpRequst 物件，editor 是編輯器物件，result 是伺服器端返回的結果
    alert('圖片插入失敗')
    // 圖片插入失敗時返回
   },error: function (xhr,editor) {
    // 圖片上傳出錯時觸發
    // xhr 是 XMLHttpRequst 物件，editor 是編輯器物件
    // 此處好像是,訪問請求不通的時候，執行的，ajax的error
    console.log('上傳出錯')
   },timeout: function (xhr,editor) {
    // 圖片上傳超時時觸發
    // xhr 是 XMLHttpRequst 物件，editor 是編輯器物件
    console.log('上傳超時')
   },// 如果伺服器端返回的不是 {errno:0,data: [...]} 這種格式，可使用該配置
   // （但是，伺服器端返回的必須是一個 JSON 格式字串！！！否則會報錯）
   customInsert: function (insertImg,result,editor) {
    // 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
    // insertImg 是插入圖片的函式，editor 是編輯器物件，result 是伺服器端返回的結果
 
    // 上傳成功後，可以監聽返回結果，可以處理土圖片插入
    if ( result.status==200) {
     insertImg(result.data)
    }else{
     console.log(result.message)
    }
    // 舉例：假如上傳圖片成功後，伺服器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
    // console.log(result);
    // var url = result.url
    // insertImg(url)
 
    // result 必須是一個 JSON 格式字串！！！否則報錯
   },}
  editor.create();
 },}

以上這篇解決vue專案中的Invalid Host header問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。