在手機瀏覽器上訪問vue-cli(vue2.x)專案
(通過ip地址訪問專案,也是為了讓同網段的手機輸入電腦的訪問本專案的網址後也能訪問該專案)
1、如果修改localhost為電腦ip地址也不能訪問專案
vue-cli開發的vue2.x版本,如果不能直接通過ip地址來訪問的話,那麼要修改config/index.js
檔案中的host欄位
:把之前的localhost註釋掉,寫成0.0.0.0
,post欄位
為埠號配置。
如上配置在專案啟動後,瀏覽器位址列為http://0.0.0.0:8080,然後我們在cmd命令列使用ipconfig
命令查自己ip地址之後就可以在瀏覽器網址欄把0.0.0.0替換後就能正確進行訪問專案了。
2、如果修改localhost為電腦ip地址就能訪問專案
如果修改localhost為電腦ip地址就能訪問專案,那麼就不需要進行上面的config/index.js
檔案修改了,直接localhost替換為本地ip即可。
最後:
當我們的手機和pc連上相同的區域網後(可以理解為連線相同的wifi),那麼在手機端瀏覽器也可以直接輸入上面電腦瀏覽器的網址也能在手機端瀏覽器進行瀏覽專案了。
相關推薦
在手機瀏覽器上訪問vue-cli(vue2.x)專案
(通過ip地址訪問專案,也是為了讓同網段的手機輸入電腦的訪問本專案的網址後也能訪問該專案) 1、如果修改localhost為電腦ip地址也不能訪問專案 vue-cli開發的vue2.x版本,如果不能直接通過ip地址來訪問的話,那麼要修改config/index.js檔案中的host欄
vue-cli(vue2.x)配置——axios訪問本地模擬的json資料檔案
有時候我們沒有後臺介面請求檔案,那麼我們可以自己在專案根目錄下模擬json資料檔案,然後通過請求這個檔案來渲染我們的元件。 1、配置build/webpack.dev.conf.js檔案 1.1、在const devWebpackConfig = merge(baseWebpackC
vue-cli(vue2.x)配置跨域請求代理,設定請求頭
1、在config/index.js設定配置檔案,跨域配置代理 (預設裡面內容為空,我們需要加入對跨域介面的配置) 根據介面的不同設定的請求頭和主機也不同,自己按照格式要求進行配置即可。 如上圖配置好了之後,'/apis/getSongLyric'為自定義的axios請求路徑,自己根據相
vue-cli(vue2.x)中使用axios
Axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。 特性 瀏覽器端發起XMLHttpRequests請求 Node端發起http請求 支援Promise API 攔截請求和響應 轉化請求和響應(資料) 取消請求 自動轉化json資料 客戶
一次vue-cli 2.x專案打包優化經歷(優化xlsx外掛)
if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.
使用vue-cli 建立vue2.x專案中使用vue-router 與之前的區別
使用vue-cli 建立vue2.x專案中使用vue-router 與之前的區別 現在根據官方文件 檢視開始 ,可以看到: HTML中 使用router-link 元件來導航,通過傳入’to’ 屬性指定連結,而<router-link>
vue在手機瀏覽器上不顯示的解決方法
vue在手機上不顯示很有可能是因為嚴格模式導致的,這時候要檢查程式碼中input上的和v-modal相關的程式碼是否書寫正確。例如:radio上有了v-modal的話再加:checked就會報錯。如果實在定位不到問題,這時候可以通過chrome://inspect/#devi
瀏覽器上安裝vue devtools
run 下載 window系統 ejs 瀏覽器 .json tools 模式 npm 安裝前要檢查一下node版本的(node -v),必須將版本提高到>4.4.7。低版本的node在安裝devtools時執行npm install 時報錯。如何升級node版本,若在
Vue 爬坑之路(十二)—— vue-cli 3.x 搭建項目
cas sas 環境變量 npm pack 全局 開發模式 文件 預編譯 Vue Cli 3 官方文檔:https://cli.vuejs.org/zh/guide/ 一、安裝 @vue/cli 更新到 3.x 之後,vue-cli 的包名從 vue-cli 改
vue 腳手架 vue-cli 3.x 基礎
安裝 npm install -g @vue/cli 檢視版本 vue -V 建立專案 1.輸入下面命令(project-name :專案名稱,自己定義) vue create project-name 2.選擇Manually select Features (手動
Vue 爬坑之路 — vue-cli 3.x 搭建專案
一、安裝 @vue/cli 更新到 3.x 之後,vue-cli 的包名從vue-cli 改成了 @vue/cli 如果之前全域性安裝了舊版本的vue-cli (1.x 或 2.x),首先需要使用以下命令解除安裝掉 // 如果沒有安裝舊版本的 vue-cli 可以跳過解除安裝直接
vue實戰開發002:區域網中訪問vue-cli專案
專案準備上線了,後期交給另一個團隊負責,在部署伺服器前人家要先了解下我們的專案情況,所以需要登入,由於是內網環境,所以對方可以直接訪問我的電腦ip來訪問我的本地專案,但是在開發時我們設定的是localhost也就是127.0.0.1訪問本地專案,
vue-cli 3.x安裝配置步驟詳細說明
sso irb event js文件 mon compile cbo 輸出 安裝配置 一、vue-cli 3.x簡單介紹 Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統:是一個類似於 create-react-app 的可以用例命令行快速配置和生成一個
vue-cli 3.x 上線 【入坑合集】
vue-cli 3.x 打包上線 【入坑合集】 問題1:使用vue-cli 3.x開發的專案,開發的時候順利無比,一旦打包上線各種問題就來了。首先是資源裡面報各種各樣的請求錯誤。 解決思路:在src資料夾同級目錄下建立vue.config.js檔案 在vue.config.js
vue-cli 3.x 入門詳解
vue-cli 3.x 詳解 1.前言 接觸vue-cli 2.x 很長時間了,因為想要保持住自己充沛的學習能力與充分前進的動力(其實是專案需要【手動滑稽~】) 所以vue-cli 3.x 出來以後一直關注,出來幾個月了,現在用了幾天之後,不得不說比之前的2.x版本更加的適合前端
vue-cli 3.x.x搭建專案及配置
vue-cli 官網:https://cli.vuejs.org/zh/guide/ 一、安裝cli 若之前安裝過2.x.x,需先解除安裝 npm uninstall vue-cli -g # or yarn global remove vue-cli Vue CLI 3.0 + 安裝
vue-cli 2.x和3.x安裝的區別
1.全域性安裝vue的腳手架:vue-cli(指定版本後面加@2.x.x) npm install -g vue-cli npm install -g @vue/cli 2.使用初始化 vue 專案: vue init webpack <project-name> vue create
vue-cli 3.x 自定義外掛併發布到 npm
乾貨轉載——https://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.html 全是知識點吶 趕緊記下來啊 一、調整專案結構 首先用 vue-cli 建立一個 default 專案 // 順便安利一篇文章《Vue 爬坑之路(十二)——
Google瀏覽器上安裝 Vue Devtools
第一步:到github上下載devtool壓縮包,地址: https://github.com/vuejs/vue-devtools 解壓後我們得到vue-devtools-master資料夾,在資料夾裡開啟cmd命令列,依次輸入npm install 命令與npm run build
如何用電腦除錯安卓手機瀏覽器上的網頁
下面的方法,只適用於安卓手機和windows,並且都需要谷歌瀏覽器。手機(安卓機)需要安裝chrome與電腦上的chrome配合1.手機的準備工作開啟手機的開發者模式(設定->關於手機->版本號);再開啟USB除錯(設定->開發者選項->USB除錯),