项目部署流程

nginx下部署vue项目的方法步骤

本文详细介绍了在nginx下部署vue项目的方法和过程。原文根据示例代码非常详细，对大家的学习培训或者工作都有一定的参考价值。有需要的朋友会陪我去学习了解一下。

今天，要采用nginx，一个web服务器，您还必须将新的vue项目部署到web服务器，所以请记下来。

先去nginx官网下载nginx:

下载链接:https://nginx.org/en/download.html

免费下载，它会是一个解压包，以你想放进去的文件夹的名字来缓解压力。

运行nginx.exe，然后浏览器打开，键入localhost退出。下图显示是成功的:

然后，如果你没有成功走出去，不要惊慌，也不要害怕。您的端口号可能被其他内容占用。此时，您可以打开nginx文件目录来查找conf。

点击进入，然后寻找nginx.conf文件

然后用在线编辑器的方法打开。打开后，监听发现这里的服务器是你的服务器端口，默认设置是端口80。可以根据不是自己占用的端口号来更改。更改完成后，保存它，然后打开您的localhost:您更改的服务器端口是正常的。

server{ listen8088; server_namelocalhost; #charsetkoi8-r; #access_loglogs/host.access.logmain; location/{ roothtml; indexindex.htmlindex.htm; }

以上是nginx网络服务器的安装和配备方式，以下是如何将自己的vue项目部署到自己已经安装和配备的nginx网络服务器上的过程:

首先，找到你自己的vue新项目，然后输入命令npmrunbuild，它会在你的vue文件目录中形成一个dist文件夹名，里面有你的vue新项目。

然后打开dist文件夹名称并复制出内容。里面会有两个文档，一个是index.html的主目录，一个是静态文件夹名。

把它们复制出来，然后打开你的nginx文件目录。html文档中有两个默认设置。立即删除文档，不要离开它。然后很快粘贴你复制的文档。

然后浏览器打开，键入最初更改的服务器端口localhost:您更改的服务器端口的回车键；你会看到你自己的vue的新项目运行。我的开场白是这样的:

就是这样~~~~

文章里的内容就这些了。期待对大家的学习和培训有所帮助，也期待大家的应用。