vue 本地服務(wù)不能被外部IP訪問的完美解決方法
更新時間：2018年10月29日 14:08:49 作者：大猩猩X
這篇文章主要介紹了vue 本地服務(wù)不能被外部IP訪問的解決方法,本文通過代碼講解的非常詳細，需要的朋友可以參考下
解決 webpack-dev-serveri 啟動后通過外部訪問報錯 invalid host header
修改 config/index.js 的 host 屬性為 ‘0.0.0.0'
{
// ...,
host: '0.0.0.0',
port: 8080,
// ...
}
修改 build/webpack.dev.conf.js 的 devServer 配置
增加 disableHostCheck = true
devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
disableHostCheck: true,
watchOptions: {
poll: config.dev.poll,
}
}
啟動后就可以通過 IP 訪問了，比如 IP 為 192.168.1.100
PS：vue把localhost改成ip地址無法訪問—解決方法
打開package.json文件，找到下面的代碼
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
改成
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.0.114",
"start": "npm run dev",
"build": "node build/build.js"
},
host后面是你的ip地址。
以上所述是小編給大家介紹的vue 本地服務(wù)不能被外部IP訪問的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue實現(xiàn)el-menu和el-tab聯(lián)動的示例代碼
本文主要介紹了vue實現(xiàn)el-menu和el-tab聯(lián)動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下2021-07-07
Vue.js中class與style的增強綁定實現(xiàn)方法
由于Class和Style綁定使用頻繁，字符串拼接麻煩且易錯，因此，Vue.js 做了專門的增強，表達式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組，本文給大家講解Vue.js中class與style的增強綁定知識，感興趣的朋友一起看看吧2023-04-04
element ui 表格動態(tài)列顯示空白bug 修復(fù)方法
今天小編就為大家分享一篇element ui 表格動態(tài)列顯示空白bug 修復(fù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue使用echarts實現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
圖像二值化就是將圖像上的像素點的“灰度值”設(shè)置為[0,?0,?0]或[255,?255,?255],即要么純黑,要么純白,這篇文章主要介紹了Python實現(xiàn)圖片二值化,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了vue2實現(xiàn)手勢密碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue.extend實現(xiàn)掛載到實例上的方法,結(jié)合實例形式分析了Vue.extend實現(xiàn)掛載到實例上的具體操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
這篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見的業(yè)務(wù)場景——分頁/無限加載，以及編寫過程中自己的錯誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計思想。2016-10-10
vue2.0里，不再有自帶的過濾器，需要自己定義過濾器。下面通過實例代碼給大家介紹vue2中filter()的相關(guān)知識，感興趣的朋友一起看看吧2017-07-07