如何讓別人訪問(wèn)本地運(yùn)行的vue項(xiàng)目
讓別人訪問(wèn)本地運(yùn)行的vue項(xiàng)目
1. 修改vue項(xiàng)目中config文件下的index.js
將host: "localhost" 改為 host: "0, 0, 0, 0"
2. window + R輸入cmd調(diào)出控制臺(tái)
在控制臺(tái)中輸入 ipconfig 找到電腦的IP地址
3. 在控制面板中搜索防火墻并關(guān)閉防火墻
然后其他人就可以通過(guò)你的ip地址+端口號(hào)訪問(wèn)了。
本來(lái)你是localhost：8080這樣的。現(xiàn)在改成192.1.2.3：8080就行了
注意：需要在同一網(wǎng)絡(luò)環(huán)境下進(jìn)行訪問(wèn)，例如，連同一個(gè)wifi，或者連接同一個(gè)路由器的寬帶
本地運(yùn)行打包后的vue項(xiàng)目
打包測(cè)試（搭建服務(wù)器）
打包后的代碼必須放在服務(wù)器下才能運(yùn)行，直接雙擊index.html是不行的。
下面介紹一種利用node.js的 http-server搭建一個(gè)簡(jiǎn)單的http服務(wù)器：那么什么是http-server呢？http-server是一個(gè)基于node.js的簡(jiǎn)單的，零配置的命令行http服務(wù)器。
(1) 安裝
既然是基于node的，首先必須安裝node.js，這個(gè)略過(guò)不談。全局安裝 http-server，這樣就可以在任意一個(gè)本地項(xiàng)目中使用了。
npm install http-server -g
(2) 使用
http-server [path] [options]
path選項(xiàng)說(shuō)明
如果指定path,即為指定的路徑，如果不指定，即為當(dāng)前所在文件路徑。強(qiáng)烈建議直接在vue-cli打包后的dist文件夾下打開命令行，這樣就不用再指定文件路徑了。或者直接指定路徑為dist
http-server ./dist
options選項(xiàng)說(shuō)明
下面介紹幾個(gè)常用的：
- -p 要使用的端口（默認(rèn)為8080）；
- -o 啟動(dòng)服務(wù)器后打開瀏覽器窗口；
- -P 或 --proxy代理不能在本地解析給定的url的所有請(qǐng)求；
- -S 或 --ssl啟用https；
http-server默認(rèn)啟用8080端口，但是這個(gè)端口容易和電腦中的某些任務(wù)沖突，強(qiáng)烈建議利用-p 端口號(hào)指定一個(gè)新的端口。如果你想同時(shí)開啟兩個(gè)項(xiàng)目，則兩個(gè)項(xiàng)目必須指定不同的端口號(hào)，否則有一個(gè)項(xiàng)目是打不開的。
你的項(xiàng)目的請(qǐng)求接口是跨域的，不能直接訪問(wèn)。如何解決跨域這個(gè)問(wèn)題呢？添加-P 域名地址即可。這個(gè)P是大寫的，上面端口那個(gè)p是小寫的。請(qǐng)注意區(qū)分！
例如，我的啟動(dòng)服務(wù)器的命令即：
http-server -p 8081 -o -P http://www.baidu.com
(3) 注意
按照正常情況來(lái)說(shuō)，這時(shí)會(huì)自動(dòng)打開瀏覽器，渲染出你的項(xiàng)目?？墒?，在打包測(cè)試時(shí)，還發(fā)現(xiàn)了一些其他問(wèn)題。
1.有時(shí)候打包運(yùn)行時(shí)發(fā)現(xiàn)一片空白，這可能就是打包后的css/js的引入問(wèn)題了。默認(rèn)的引入方式是絕對(duì)路徑方式。我們希望是相對(duì)路徑，可以把config/index.js中的assetsPublicPath: ‘/’,改為assetsPublicPath: ‘./’,這樣再打包出來(lái)的就是相對(duì)路徑了。
assetsPublicPath: '/', ?// 絕對(duì)路徑 assetsPublicPath: './', // 相對(duì)路徑
2.運(yùn)行打包后的項(xiàng)目時(shí)，在非首頁(yè)頁(yè)面刷新時(shí)直接404，如果你的項(xiàng)目出現(xiàn)這個(gè)問(wèn)題，那么你的router中一定是把mode定義為history了。定義hash模式則不會(huì)出這個(gè)問(wèn)題。難道只能用很丑的hash？當(dāng)然不是，其實(shí)vue-router官方文檔的HTML5 History 模式對(duì)此已有說(shuō)明，這個(gè)就需要后端的幫我們?cè)O(shè)置一下了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue移動(dòng)端實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場(chǎng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場(chǎng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
今天小編就為大家分享一篇關(guān)于實(shí)例講解v-if和v-show的區(qū)別，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要介紹了vue如何讀取外部配置文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關(guān)于Vue中常用的鼠標(biāo)移入移出事件的相關(guān)資料,鼠標(biāo)移入移出事件在 Vue 中可以通過(guò)@mouseenter和@mouseleave來(lái)綁定,需要的朋友可以參考下2023-07-07
Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)
這篇文章主要介紹了Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
本篇文章主要介紹了VueJs路由跳轉(zhuǎn)——vue-router的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
本文主要介紹了element前端實(shí)現(xiàn)壓縮圖片的功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue全局事件總線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
關(guān)于vue中的時(shí)間格式轉(zhuǎn)化問(wèn)題
這篇文章主要介紹了關(guān)于vue中的時(shí)間格式轉(zhuǎn)化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07