如何讓別人訪問本地運行的vue項目
讓別人訪問本地運行的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)境下進行訪問,例如,連同一個wifi,或者連接同一個路由器的寬帶
本地運行打包后的vue項目
打包測試(搭建服務(wù)器)
打包后的代碼必須放在服務(wù)器下才能運行,直接雙擊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,即為指定的路徑,如果不指定,即為當前所在文件路徑。強烈建議直接在vue-cli打包后的dist文件夾下打開命令行,這樣就不用再指定文件路徑了?;蛘咧苯又付窂綖閐ist
http-server ./dist
options選項說明
下面介紹幾個常用的:
- -p 要使用的端口(默認為8080);
- -o 啟動服務(wù)器后打開瀏覽器窗口;
- -P 或 --proxy代理不能在本地解析給定的url的所有請求;
- -S 或 --ssl啟用https;
http-server默認啟用8080端口,但是這個端口容易和電腦中的某些任務(wù)沖突,強烈建議利用-p 端口號指定一個新的端口。如果你想同時開啟兩個項目,則兩個項目必須指定不同的端口號,否則有一個項目是打不開的。
你的項目的請求接口是跨域的,不能直接訪問。如何解決跨域這個問題呢?添加-P 域名地址即可。這個P是大寫的,上面端口那個p是小寫的。請注意區(qū)分!
例如,我的啟動服務(wù)器的命令即:
http-server -p 8081 -o -P http://www.baidu.com
(3) 注意
按照正常情況來說,這時會自動打開瀏覽器,渲染出你的項目??墒?,在打包測試時,還發(fā)現(xiàn)了一些其他問題。
1.有時候打包運行時發(fā)現(xiàn)一片空白,這可能就是打包后的css/js的引入問題了。默認的引入方式是絕對路徑方式。我們希望是相對路徑,可以把config/index.js中的assetsPublicPath: ‘/’,改為assetsPublicPath: ‘./’,這樣再打包出來的就是相對路徑了。
assetsPublicPath: '/', ?// 絕對路徑 assetsPublicPath: './', // 相對路徑
2.運行打包后的項目時,在非首頁頁面刷新時直接404,如果你的項目出現(xiàn)這個問題,那么你的router中一定是把mode定義為history了。定義hash模式則不會出這個問題。難道只能用很丑的hash?當然不是,其實vue-router官方文檔的HTML5 History 模式對此已有說明,這個就需要后端的幫我們設(shè)置一下了。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vuepress 搭建帶評論功能的靜態(tài)博客的實現(xiàn)
這篇文章主要介紹了Vuepress 搭建帶評論功能的靜態(tài)博客的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-02-02VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
本篇文章主要介紹了VueJs路由跳轉(zhuǎn)——vue-router的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01