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  運行

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

 

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