欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何讓別人訪問本地運行的vue項目

 更新時間:2022年10月22日 11:24:18   作者:linx_i  
這篇文章主要介紹了如何讓別人訪問本地運行的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)文章

  • vue移動端實現(xiàn)手機左右滑動入場動畫

    vue移動端實現(xiàn)手機左右滑動入場動畫

    這篇文章主要為大家詳細介紹了vue移動端實現(xiàn)手機左右滑動入場動畫,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • 實例講解v-if和v-show的區(qū)別

    實例講解v-if和v-show的區(qū)別

    今天小編就為大家分享一篇關(guān)于實例講解v-if和v-show的區(qū)別,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • vue如何讀取外部配置文件

    vue如何讀取外部配置文件

    這篇文章主要介紹了vue如何讀取外部配置文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue中常用的鼠標移入移出事件詳解

    Vue中常用的鼠標移入移出事件詳解

    這篇文章主要給大家介紹了關(guān)于Vue中常用的鼠標移入移出事件的相關(guān)資料,鼠標移入移出事件在 Vue 中可以通過@mouseenter和@mouseleave來綁定,需要的朋友可以參考下
    2023-07-07
  • Vuepress 搭建帶評論功能的靜態(tài)博客的實現(xiàn)

    Vuepress 搭建帶評論功能的靜態(tài)博客的實現(xiàn)

    這篇文章主要介紹了Vuepress 搭建帶評論功能的靜態(tài)博客的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-02-02
  • Vue.js slot插槽的作用域插槽用法詳解

    Vue.js slot插槽的作用域插槽用法詳解

    這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • VueJs路由跳轉(zhuǎn)——vue-router的使用詳解

    VueJs路由跳轉(zhuǎn)——vue-router的使用詳解

    本篇文章主要介紹了VueJs路由跳轉(zhuǎn)——vue-router的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-01
  • element前端實現(xiàn)壓縮圖片的功能

    element前端實現(xiàn)壓縮圖片的功能

    本文主要介紹了element前端實現(xiàn)壓縮圖片的功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-03-03
  • Vue全局事件總線你了解嗎

    Vue全局事件總線你了解嗎

    這篇文章主要為大家詳細介紹了Vue全局事件總線,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • 關(guān)于vue中的時間格式轉(zhuǎn)化問題

    關(guān)于vue中的時間格式轉(zhuǎn)化問題

    這篇文章主要介紹了關(guān)于vue中的時間格式轉(zhuǎn)化問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07

最新評論