VUE項目部署公網ip和端口以及使用域名訪問配置

前提是已經配置好了相應的外網和內網端口的映射

一.公網ip和端口配置

在vue項目啓動以前對項目下：項目名/config/index.js 文件進行修改

原來的內容爲：(位置在index.js的第16,17行做用)

 

    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

 

修改成0.0.0.0 和8070端口：

    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8070, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

二.使用域名+端口訪問配置

沒有配置的狀況下經過域名加端口訪問出現：

在以下截圖的位置加這個配置：

 

disableHostCheck: true,// 解決域名訪問本地運行地址時出現Invalid Host header的問題 

 

在此用：npm run dev  運行

此時用域名加端口訪問正常

 

此種部署有很大的缺點，不適合生成環境中，只能用於項目代碼測試