VUE项目部署公网ip和端口以及使用域名访问配置
<p><span style="font-family: 宋体">前提是已经配置好了相应的外网和内网端口的映射</span></p><p><strong><span style="font-family: 宋体">一</span>.<span style="font-family: 宋体">公网</span><span style="font-family: Calibri">ip</span><span style="font-family: 宋体">和端口配置</span></strong></p>
<p><span style="font-family: 宋体">在</span>vue<span style="font-family: 宋体">项目启动之前对项目下：项目名</span><span style="font-family: Calibri">/config/index.js </span><span style="font-family: 宋体">文件进行修改</span></p>
<p><span style="font-family: 宋体">原来的内容为：</span>(<span style="font-family: 宋体">位置在</span><span style="font-family: Calibri">index.js</span><span style="font-family: 宋体">的第</span><span style="font-family: Calibri">16,17</span><span style="font-family: 宋体">行作用</span><span style="font-family: Calibri">)</span></p>
<p> </p>
<div class="cnblogs_code">
<pre> host: <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">localhost</span><span style="color: rgba(128, 0, 0, 1)">'</span>, //<span style="color: rgba(0, 0, 0, 1)"> can be overwritten by process.env.HOST
port: </span>8080, // can be overwritten by process.env.PORT, <span style="color: rgba(0, 0, 255, 1)">if</span> port <span style="color: rgba(0, 0, 255, 1)">is</span> <span style="color: rgba(0, 0, 255, 1)">in</span> use, a free one will be determined</pre>
</div>
<p> </p>
<p>修改为0.0.0.0 和8070端口：</p>
<div class="cnblogs_code">
<pre> host: <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">0.0.0.0</span><span style="color: rgba(128, 0, 0, 1)">'</span>, //<span style="color: rgba(0, 0, 0, 1)"> can be overwritten by process.env.HOST
port: </span>8070, // can be overwritten by process.env.PORT, <span style="color: rgba(0, 0, 255, 1)">if</span> port <span style="color: rgba(0, 0, 255, 1)">is</span> <span style="color: rgba(0, 0, 255, 1)">in</span> use, a free one will be determined</pre>
</div>
<p><img src="https://img2018.cnblogs.com/blog/1441691/201908/1441691-20190816111247137-351609590.png" alt=""></p>
<p><strong><span style="font-family: 宋体">二</span>.<span style="font-family: 宋体">使用域名</span><span style="font-family: Calibri">+</span><span style="font-family: 宋体">端口访问配置</span></strong></p>
<p><span style="font-family: 宋体">没有配置的情况下通过域名加端口访问出现：</span></p>
<p><span style="font-family: 宋体"><img src="https://img2018.cnblogs.com/blog/1441691/201908/1441691-20190816111305025-1304224983.png" alt=""></span></p>
<p><span style="font-family: 宋体">在如下截图的位置加这个配置：</span></p>
<p> </p>
<div class="cnblogs_code">
<pre>disableHostCheck: true,// 解决域名访问本地运行地址时出现Invalid Host header的问题 </pre>
</div>
<p> </p>
<p><img src="https://img2018.cnblogs.com/blog/1441691/201908/1441691-20190816111334821-1948283494.png" alt=""></p>
<p><span style="font-family: 宋体">在此用：</span>npm run dev <span style="font-family: 宋体">运行</span></p>
<p><span style="font-family: 宋体">此时用域名加端口访问正常</span></p>
<p><span style="font-family: 宋体"><img src="https://img2018.cnblogs.com/blog/1441691/201908/1441691-20190816111359121-122235464.png" alt=""></span></p>
<p> </p>
<p>此种部署有很大的缺点，不适合生成环境中，只能用于项目代码测试 </p><br><br>
来源：https://www.cnblogs.com/hszstudypy/p/11362709.html
頁:
[1]