資訊專欄INFORMATION COLUMN
摘要：使用手機(jī)訪問演示頁面如果使用和創(chuàng)建項(xiàng)目。后手機(jī)不能通過網(wǎng)絡(luò)訪問演示頁面，原因是默認(rèn)使用計(jì)算機(jī)本地連接的地址作為網(wǎng)絡(luò)訪問地址修改地址為要使用的無線網(wǎng)絡(luò)地址就可以解決問題在之前的版本中可以修改目錄內(nèi)文件解決移除了文件后可嘗試如下解決辦法。
Vue-cli 3.5.1 + Webstorm 使用手機(jī)訪問演示頁面
如果使用Webstorm和Vue-cli 3.5.1創(chuàng)建項(xiàng)目。
npm run server 后手機(jī)不能通過網(wǎng)絡(luò)訪問演示頁面，
原因是webstorm默認(rèn)使用計(jì)算機(jī)本地連接的IP地址作為網(wǎng)絡(luò)訪問地址,
修改IP地址為要使用的無線網(wǎng)絡(luò)地址就可以解決問題.
在之前的版本中可以修改config目錄內(nèi)index.js文件解決.
cli3移除了config文件后:
可嘗試如下解決辦法。
vue.config.js是vue cli 3移除config目錄后可選的配置文件,如果創(chuàng)建在根目錄下會(huì)自動(dòng)加載.
vue.config.js 參考文檔 : https://cli.vuejs.org/zh/conf...
模板設(shè)置
// vue.config.js 配置說明
// 這里只列一部分，具體配置參考文檔
module.exports = {
//publicPath:用于替代原先baseUrl;
publicPath: process.env.NODE_ENV === "production"
? "/production-sub-path/"
: "/",
// outputDir: 在npm run build 或 yarn build 時(shí) ，生成文件的目錄名稱（要和baseUrl的生產(chǎn)環(huán)境路徑一致）
outputDir: "mycli3",
//用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的；（項(xiàng)目打包之后，靜態(tài)資源會(huì)放在這個(gè)文件夾下）
assetsDir: "assets",
//指定生成的 index.html 的輸出路徑 (打包之后，改變系統(tǒng)默認(rèn)的index.html的文件名)
// indexPath: "myIndex.html",
//默認(rèn)情況下，生成的靜態(tài)資源在它們的文件名中包含了 hash 以便更好的控制緩存。你可以通過將這個(gè)選項(xiàng)設(shè)為 false 來關(guān)閉文件名哈希。(false的時(shí)候就是讓原來的文件名不改變)
filenameHashing: false,
// lintOnSave：{ type:Boolean default:true } 問你是否使用eslint
lintOnSave: true,
//如果你想要在生產(chǎn)構(gòu)建時(shí)禁用 eslint-loader，你可以用如下配置
// lintOnSave: process.env.NODE_ENV !== "production",
//是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項(xiàng)了，但是這會(huì)讓你的應(yīng)用額外增加 10kb 左右。(默認(rèn)false)
// runtimeCompiler: false,
/**
* 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。
* 打包之后發(fā)現(xiàn)map文件過大，項(xiàng)目文件體積很大，設(shè)置為false就可以不輸出map文件
* map文件的作用在于：項(xiàng)目打包后，代碼都是經(jīng)過壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。
* 有了map就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行哪一列有錯(cuò)。
* */
productionSourceMap: false,
// 它支持webPack-dev-server的所有選項(xiàng)
devServer: {
host: "192.168.31.23",
port: 8080, // 端口號(hào)
https: false, // https:{type:Boolean}
open: false, //配置自動(dòng)啟動(dòng)瀏覽器
// proxy: "http://localhost:4000" // 配置跨域處理,只有一個(gè)代理
// 配置多個(gè)代理
proxy: {
"/api": {
target: "",
ws: true,
changeOrigin: true
},
"/foo": {
target: ""
}
}
}
};
修改設(shè)置
將模板設(shè)置內(nèi)的devserver部分內(nèi)的host修改為你要使用的網(wǎng)絡(luò)IP地址.
將port修改為要使用的端口號(hào),
重新npm run server即可.
獲取IP地址不建議使用ipconfig命令獲取,建議直接點(diǎn)擊網(wǎng)絡(luò)圖標(biāo)查看屬性內(nèi)的IP地址.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102608.html
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：我個(gè)人比較推薦的方法是或者安卓手機(jī)的這種方式，比較簡單方便快捷，然后根據(jù)具體的環(huán)境再選擇更為合適的調(diào)試方法。 本文首次發(fā)表于本人的個(gè)人博客：http://cherryblog.site/ ，歡迎大家到我的博客查看更多文章~ 前言 在開發(fā)中前端免不了要進(jìn)行移動(dòng)端的開發(fā)，然而在電腦上看的樣式和手機(jī)上還是有一定的差距的，因?yàn)槭謾C(jī)上有頂部的狀態(tài)欄和底部的菜單欄，特別是在qq內(nèi)置瀏覽器中打開，差...
閱讀 2979·2023-04-25 19:45
閱讀 2696·2021-11-19 09:40
閱讀 702·2021-10-14 09:49
閱讀 2710·2021-09-30 09:47
閱讀 2241·2021-09-26 09:55
閱讀 1233·2021-09-22 16:01
閱讀 2820·2019-08-30 14:19
閱讀 714·2019-08-29 16:44
