vue項目如何讓局域網(wǎng)ip訪問配置設置
vue讓局域網(wǎng)ip訪問配置設置
在開發(fā)中，為了讓同一局域網(wǎng)的小伙伴，都可以通過IP地址訪問到vue-cli搭建的項目，要怎么配置呢?
第一步：修改config文件中找到 index.js 文件的host改成 ‘0.0.0.0’
第二步：檢查 package.json 文件里進行配置，scripts.dev配置是否設置 host為‘0.0.0.0’
這里我要強調(diào)下，第一步和第二步都有ip，其實第二步優(yōu)先級高，這里第二步的host可以不設置，vue默認執(zhí)行第一步的設置。
這個ip也可以設置成你的局域網(wǎng)ip，例如：192.168.1.182
第三步：查看開發(fā)機的ip地址，并告訴給其他小伙伴，別忘了端口
第四步：如果通過IP還不能訪問，最好是關(guān)閉開發(fā)機的防火墻，如果你不怕麻煩也可添加放行端口
vue局域網(wǎng)使用ip無法訪問的解決
搜到了很多解決方法，但是，嘗試到這個才能用
版本：
[root@localhost vue_time]# vue --version
2.9.6[root@localhost vue_time]# node -v
v15.5.1
只要在項目的目錄下，找到package.json 在script模塊下，dev項中，增加一個啟動配置參數(shù) --host 0.0.0.0即可，下面是增加了之后的
[root@localhost vue_time]# cat package.json
{
"name": "vue_time",
"version": "1.0.0",
"description": "A Vue.js project",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vant的安裝和配合引入Vue.js項目里的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細介紹了vue使用screenfull插件實現(xiàn)全屏功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
vue中Form 表單的 resetFields() 失效原因及問題解決
在Vue項目中,使用formRef.value.resetFields()方法重置表單時可能遇到不起作用的問題,下面就來介紹一下如何解決,感興趣的可以了解一下2024-09-09
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)登陸注冊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue.js el-tooltip根據(jù)文字長度控制是否提示toolTip問題
這篇文章主要介紹了vue.js el-tooltip根據(jù)文字長度控制是否提示toolTip問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹
這篇文章主要介紹了Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
本篇文章主要介紹了vuejs使用$emit和$on進行組件之間的傳值的示例，具有一定的參考價值，有興趣的可以了解一下2017-10-10
Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝,主要包括安裝axios及簡單使用配置方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
vue與bootstrap實現(xiàn)簡單用戶信息添加刪除功能
這篇文章主要為大家詳細介紹了vue與bootstrap實現(xiàn)簡單用戶信息添加刪除功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
最近項目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過js手動控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下2023-12-12