讓別人訪問本地運(yùn)行的vue項目

1. 修改vue項目中config文件下的index.js

將host: "localhost" 改為 host: "0, 0, 0, 0"

2. window + R輸入cmd調(diào)出控制臺

在控制臺中輸入 ipconfig 找到電腦的IP地址

3. 在控制面板中搜索防火墻并關(guān)閉防火墻

然后其他人就可以通過你的ip地址+端口號訪問了。

本來你是localhost：8080這樣的?，F(xiàn)在改成192.1.2.3：8080就行了 

注意：需要在同一網(wǎng)絡(luò)環(huán)境下進(jìn)行訪問，例如，連同一個wifi，或者連接同一個路由器的寬帶

本地運(yùn)行打包后的vue項目

打包測試（搭建服務(wù)器）

打包后的代碼必須放在服務(wù)器下才能運(yùn)行，直接雙擊index.html是不行的。

下面介紹一種利用node.js的 http-server搭建一個簡單的http服務(wù)器：那么什么是http-server呢？http-server是一個基于node.js的簡單的，零配置的命令行http服務(wù)器。

(1) 安裝

既然是基于node的，首先必須安裝node.js，這個略過不談。全局安裝 http-server，這樣就可以在任意一個本地項目中使用了。

npm install http-server -g

(2) 使用

http-server [path] [options]

path選項說明

如果指定path,即為指定的路徑，如果不指定，即為當(dāng)前所在文件路徑。強(qiáng)烈建議直接在vue-cli打包后的dist文件夾下打開命令行，這樣就不用再指定文件路徑了?；蛘咧苯又付窂綖閐ist

http-server ./dist

options選項說明

下面介紹幾個常用的：

• -p 要使用的端口（默認(rèn)為8080）；
• -o 啟動服務(wù)器后打開瀏覽器窗口；
• -P 或 --proxy代理不能在本地解析給定的url的所有請求；
• -S 或 --ssl啟用https；

http-server默認(rèn)啟用8080端口，但是這個端口容易和電腦中的某些任務(wù)沖突，強(qiáng)烈建議利用-p 端口號指定一個新的端口。如果你想同時開啟兩個項目，則兩個項目必須指定不同的端口號，否則有一個項目是打不開的。

你的項目的請求接口是跨域的，不能直接訪問。如何解決跨域這個問題呢？添加-P 域名地址即可。這個P是大寫的，上面端口那個p是小寫的。請注意區(qū)分！

例如，我的啟動服務(wù)器的命令即：

http-server -p 8081 -o -P http://www.baidu.com

(3) 注意

按照正常情況來說，這時會自動打開瀏覽器，渲染出你的項目。可是，在打包測試時，還發(fā)現(xiàn)了一些其他問題。

1.有時候打包運(yùn)行時發(fā)現(xiàn)一片空白，這可能就是打包后的css/js的引入問題了。默認(rèn)的引入方式是絕對路徑方式。我們希望是相對路徑，可以把config/index.js中的assetsPublicPath: ‘/’,改為assetsPublicPath: ‘./’,這樣再打包出來的就是相對路徑了。

assetsPublicPath: '/', ?// 絕對路徑
assetsPublicPath: './', // 相對路徑

2.運(yùn)行打包后的項目時，在非首頁頁面刷新時直接404，如果你的項目出現(xiàn)這個問題，那么你的router中一定是把mode定義為history了。定義hash模式則不會出這個問題。難道只能用很丑的hash？當(dāng)然不是，其實vue-router官方文檔的HTML5 History 模式對此已有說明，這個就需要后端的幫我們設(shè)置一下了。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論