vue 本地服務(wù)不能被外部IP訪問的完美解決方法

更新時間：2018年10月29日 14:08:49 作者：大猩猩X

這篇文章主要介紹了vue 本地服務(wù)不能被外部IP訪問的解決方法,本文通過代碼講解的非常詳細(xì)，需要的朋友可以參考下

解決 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

http://192.168.1.100:8080

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)動的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue圖片裁剪組件實例代碼
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下
2021-07-07
Vue.js中class與style的增強(qiáng)綁定實現(xiàn)方法
由于Class和Style綁定使用頻繁，字符串拼接麻煩且易錯，因此，Vue.js 做了專門的增強(qiáng)，表達(dá)式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組，本文給大家講解Vue.js中class與style的增強(qiáng)綁定知識，感興趣的朋友一起看看吧
2023-04-04
element ui 表格動態(tài)列顯示空白bug 修復(fù)方法
今天小編就為大家分享一篇element ui 表格動態(tài)列顯示空白bug 修復(fù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue使用echarts實現(xiàn)立體柱形圖
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
Python實現(xiàn)圖片二值化的詳細(xì)代碼
圖像二值化就是將圖像上的像素點(diǎn)的“灰度值”設(shè)置為[0,?0,?0]或[255,?255,?255],即要么純黑,要么純白,這篇文章主要介紹了Python實現(xiàn)圖片二值化,需要的朋友可以參考下
2024-05-05
vue2實現(xiàn)手勢密碼功能
這篇文章主要為大家詳細(xì)介紹了vue2實現(xiàn)手勢密碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue.extend實現(xiàn)掛載到實例上的方法
這篇文章主要介紹了Vue.extend實現(xiàn)掛載到實例上的方法,結(jié)合實例形式分析了Vue.extend實現(xiàn)掛載到實例上的具體操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
vue制作加載更多功能的正確打開方式
這篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見的業(yè)務(wù)場景——分頁/無限加載，以及編寫過程中自己的錯誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設(shè)計思想。
2016-10-10
vue2中filter()的實現(xiàn)代碼
vue2.0里，不再有自帶的過濾器，需要自己定義過濾器。下面通過實例代碼給大家介紹vue2中filter()的相關(guān)知識，感興趣的朋友一起看看吧
2017-07-07