vue項(xiàng)目實(shí)現(xiàn)通過(guò)ip地址訪問(wèn)和localhost訪問(wèn)方式
更新時(shí)間：2022年09月05日 17:15:27 作者：codernmx
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)通過(guò)ip地址訪問(wèn)和localhost訪問(wèn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue項(xiàng)目通過(guò)ip地址訪問(wèn)和localhost訪問(wèn)
為了實(shí)現(xiàn)vue項(xiàng)目啟動(dòng)服務(wù)，多個(gè)人可以查看，別人可以通過(guò)ip+端口訪問(wèn)
在config文件下的index.js文件中，修改host為：
host: '0.0.0.0'，
或者在package.json文件下"scripts"的"dev"后面加上–host 0.0.0.0"
例如：
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
重啟服務(wù)可以看到通過(guò)localhost和IP地址都可以訪問(wèn)到這個(gè)服務(wù)。
vue項(xiàng)目中把localhost改成ip地址訪問(wèn)
vue2.0項(xiàng)目中 localhost改成ip地址訪問(wèn)
config/index.js改成
host: '0.0.0.0',? port: 8888,
打包后index.html空白 修改
webpack.prod.conf.js 里的
publicPath:'./',
vue3項(xiàng)目改成ip地址訪問(wèn)
1.在項(xiàng)目的根目錄下創(chuàng)建文件vue.config.js
2.在該文件中進(jìn)行相關(guān)配置，從而覆蓋默認(rèn)配置
module.exports = {
? ? outputDir:"course-analysis", //打包后的項(xiàng)目目錄名稱
? ? publicPath: './',
? ? devServer:{
? ? ? ? host: '0.0.0.0',
? ? ? ? port:8888
? ? }
};以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在elementui中Notification組件添加點(diǎn)擊事件實(shí)例
這篇文章主要介紹了在elementui中Notification組件添加點(diǎn)擊事件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue實(shí)現(xiàn)發(fā)表評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)發(fā)表評(píng)論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined&nbs
這篇文章主要介紹了vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined no-undef的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue+eslint+vscode配置教程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue-cli使用stimulsoft.reports.js的詳細(xì)教程
Stimulsoft?Reports.JS是一個(gè)使用JavaScript和HTML5生成報(bào)表的平臺(tái)。它擁有所有擁來(lái)設(shè)計(jì)，編輯和查看報(bào)表的必需組件。該報(bào)表工具根據(jù)開(kāi)發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來(lái)通過(guò)本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12
Element-ui tree組件自定義節(jié)點(diǎn)使用方法代碼詳解
本文通過(guò)實(shí)例代碼給大家介紹了Element-ui tree組件自定義節(jié)點(diǎn)使用方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue中props值的傳遞，在vue中父組件要正向的向子組件傳遞數(shù)據(jù)或者參數(shù)，子組件接收到后根據(jù)參數(shù)的不同來(lái)進(jìn)行對(duì)應(yīng)的渲染，這個(gè)正向的數(shù)據(jù)傳遞在vue組件中就是通過(guò)props來(lái)實(shí)現(xiàn)的，需要的朋友可以參考下2009-05-05
使用WebStorm開(kāi)發(fā)Vue3項(xiàng)目詳細(xì)教程
這篇文章主要介紹了使用WebStorm開(kāi)發(fā)Vue3項(xiàng)目的相關(guān)資料,本文介紹了在WebStorm中使用Vue3、TypeScript、Sass開(kāi)發(fā)項(xiàng)目的配置過(guò)程,包括版本兼容性問(wèn)題、項(xiàng)目搭建、依賴包安裝、代碼檢查工具配置、運(yùn)行和調(diào)試等步驟,需要的朋友可以參考下2024-11-11
vue下axios攔截器token刷新機(jī)制的實(shí)例代碼
這篇文章主要介紹了vue下axios攔截器token刷新機(jī)制的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
vue.js實(shí)現(xiàn)簡(jiǎn)易折疊面板
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易折疊面板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10