webpack 專案，用內網 ip 網址進網站 | 測試中

希望前端在 localhost 環境開發時，專案可用內部網域進入， 使其他裝置開啟專案網站，方便除錯。

此專案是使用 vuejs-templates/webpack 建立的專案 https://github.com/vuejs-templates/webpack

專案「資料夾結構」請參考： http://vuejs-templates.github.io/webpack/structure.html

其中

• 'config/' 資料夾中的檔案，類似作為複寫 templete 的基本設定，將專案或自己做的客製化的設定放在這。
  • 'index.js' 這是主要的配置文件。

要能用內網 ip 進 dev 網站， 修改 devserver 套件的選項設定。 devserver 設定文件：https://webpack.js.org/configuration/dev-server

// in 'index.js' 
// Various Dev Server settings

    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // 測試了下面選項
    host: '0.0.0.0', // 修改，可以使用內網 ip 造訪
    // useLocalIp: true,  // 加了後，測試無效
    // public: "10.2.169.119:8081", // 加了後，測試無效

关键的配置属性: host 配置成 '0.0.0.0', 充许本机以外的设备访问 useLocalIp true, 将以内网 IP 为 http 地址信息打开浏览器, 不用敲 cmd ipinfo 去查内网IP了

• useLocalIp: true：讓瀏覽器可用 local IP 開啟

• public: "my.app:80"： 使用 inline (内联模式) 时，若你是 proxying dev-server，script 不一定知道在哪里连接。 它会尝试根据 window.location 来猜测服务器的 URL，但如果失败了，可以從這裡找。

  dev-server 有兩種 modes：

  • inline 默认。意味着有一個 script 將插入到您的 bundle，以處理 live reloading，和在 browser console 中顯示的訊息。
  • <iframe> 该模式在通知栏下使用 <iframe> 在 browser console 中顯示的訊息。

後來雖可以用內部網址開啟網站，但頁面空白，僅顯示 index 空白 html， 因為 api 取不到，需要把 api 網址設定為內網也可以抓到，目前是每次手動更改。