在vue-cli版本為2.x的情況下修改webpack.dev.conf.js中的devServer對象加入disableHostCheck: true
|
1
2
3
|
devServer: { disableHostCheck: true,} |
vue-cli版本3.0的情況下修改vue.config.js的配置
|
1
2
3
4
5
|
module.exports = { devServer: { disableHostCheck: true }} |
補充知識：vue中使用wangeditor富文本編輯器
1.先下載 編輯器
cnpm install wangeditor --save
2.用法：
2.1、html用來放編輯器
|
1
2
3
|
<div id="editor"> <p v-model="info">請輸入內容</p>//占位符 </div> |
2.2、js部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
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, editor, result) { // 圖片上傳并返回結果，圖片插入成功之后觸發 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果 console.log(result); }, fail: function (xhr, editor, 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問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/danruWang/article/details/88743087
