Windows服务器部署前端vue项目

<h3>阿里云Windows服务器部署前端vue项目</h3>
<h4>准备工作</h4>
<ol><li>下载node.js&#xff08;略&#xff09;http://nodejs.cn/download/</li><li>下载Nginx http://nginx.org/en/download.html</li><li>Nginx安装启用方法参考&#xff1a;参考1、参考2<br /> 注意&#xff1a;刚下载完Nginx后&#xff0c;没有配置环境变量的情况下&#xff0c;需要去Nginx文件下使用命令窗口操作</li></ol>
<h5>Nginx</h5>
<ol><li> <p>下载完后是这样子<br />

<img src="https://i-blog.csdnimg.cn/blog_migrate/1ff8ecef2535b6b5b24bbbf7e6e3a5e2.png#pic_center" alt="在这里插入图片描述" />

</p> </li><li> <p>把打包好的dist文件放入html目录下<br />

<img src="https://i-blog.csdnimg.cn/blog_migrate/c8f4d386924716c6f5c127df8f3cb171.png#pic_center" alt="在这里插入图片描述" />

</p> </li><li> <p>找到conf/nginx.config文件&#xff0c;用文本方式打开&#xff0c;进行修改<br />

<img src="https://i-blog.csdnimg.cn/blog_migrate/919810b759612071a2201ef808e9727d.png#pic_center" alt="在这里插入图片描述" />

</p> </li></ol>
<p>

<img src="https://i-blog.csdnimg.cn/blog_migrate/c4df9d6d03f272504c531ea2012e4fda.png#pic_center" alt="在这里插入图片描述" />

</p>
<ol start="4"><li>此时你在服务器的浏览器上访问&#xff1a;localhost:8080 就可以展示前端页面了<br />

<img src="https://i-blog.csdnimg.cn/blog_migrate/3a71b170e0e790620492edc3dc0a8b8a.png" alt="在这里插入图片描述" />

</li></ol>
<h5>注意&#xff01;坑来了~</h5>
<ol><li> <p>如果你页面显示的js、css路径不对的话&#xff0c;在前端项目vue.config.js中把路径改为./<br />

<img src="https://i-blog.csdnimg.cn/blog_migrate/86aa0a21963facf58528d5d6b2c3faec.png#pic_center" alt="在这里插入图片描述" />

</p> </li><li> <p>如果你在浏览器上把localhost改为公网ip的话&#xff0c;无法访问 ???</p> <p>不要慌~<br /> 如果你是第一次使用服务器&#xff0c;那么需要在云服务器上设置安全组<br />

<img src="https://i-blog.csdnimg.cn/blog_migrate/3a2bf1526089ec35a7c8e76a9594f19e.png#pic_center" alt="在这里插入图片描述" />

</p> <p>想下面这样在 入方向 里添加一条就行&#xff08;默认有三条&#xff0c;根据你配置的端口号去手动添加一条&#xff09;</p> <p>

<img src="https://i-blog.csdnimg.cn/blog_migrate/4abc3f876c77c9cc3f058629b63ce19d.png#pic_center" alt="在这里插入图片描述" />

</p> <p>重启一下Nginx</p>

1. nginx -s stop
2. start nginx

复制代码

<p>把localhost改成公网ip&#xff0c;就可以访问了</p> </li></ol>
<p>

<img src="https://i-blog.csdnimg.cn/blog_migrate/b4bc2987256da3c7fbeae6e2c28e98ec.png" alt="在这里插入图片描述" />

</p>
<p><strong>Nginx详细配置&#xff1a;</strong>https://www.cnblogs.com/dongye95/p/11096785.html#_label0_3</p>