vue項目使用webpack構建的本地服務環境，在手機上訪問調試

使用vue腳手架構建的項目，一般在本地localhost運行，配合瀏覽器的模擬調試工具開發。

如果想看真機環境，又不想build到線上。

webpack能配置電腦本地內網環境指向公網訪問的！

 

1、打開項目的package.json文件，修改里面的script里面的dev

"scripts": {

   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  --host 192.168.0.100",//就是在原有的基礎上在后面加上了 --host就是自己的電腦IP；"start": "npm run dev",

   "build": "node build/build.js" 
},

#可以打開cmd控制台，輸入ipconfig,查看自己的電腦ip;

 

2、修改好了之后本地電腦訪問要把之前網址的localhost換成自己的電腦ip地址；

在config文件里面修改

host: 'localhost', // 把這個也改為你電腦的ip 例：192.168.0.100
port: 8080,
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, 

 

3、關閉自己的電腦防火牆；

如果不關防火牆，訪問不了（#控制面板-->系統和安全-->window防火牆-->）

 

4、重新啟動該項目；

手機上訪問你電腦ip,端口號不要忘了加！

編譯器修改后 手機上同樣也會及時同步的，

 

更新：vue-cli3.0+ 自帶了這個功能