nginx运行vue,nginx配置vue前端工程和后端工程

　　今天，如果你想使用服务器nginx，你需要把你自己的vue项目部署到服务器上，所以记下来，记录下来。下面这篇文章主要介绍用nginx部署vue项目的相关信息，有需要的朋友可以参考一下。

　　首先你需要在服务器上下载nginx，

　　apt-get安装nginx

　　检查是否安装了nginx，如果输入以下命令后出现版本号，则安装成功。

　　nginx -v

　　然后启动nginx。

　　服务器nginx重启

　　如果报告了以下错误，请按照提示下载相关插件。

　　我在这里下载了2次不同的插件。直到服务器nginx重启命令成功运行。

　　这时打开浏览器，输入你的服务器ip，可以看到nginx启动成功。

　　之后进行Vue项目打包：

　　您可以在通常输入npm run dev的地方输入npm run build来完成打包。

　　如果打包失败，会出现类似“build不存在”的语句，如图：

　　然后尝试npm运行build:prod，并完成打包！

　　之后，项目的根目录下会自动生成一个默认的dist文件夹。

　　然后如果是本地打包，需要将此文件夹上传至你的服务器上。你以后需要它。

　　这里强烈建议将dist文件放在服务器中项目专用的文件夹中，后面设置路径时很容易找到。比如我把它放在/home/Ubuntu/myapp/ruoyi/ruoyi-ui的文件夹里。

　　接下来配置 Nginx

　　一定要停止nginx的运行，否则配置可能不会生效！(网上有很多关于如何停止nginx的教程，只需要找到进程并杀死它，或者用一个命令停止它)

　　我们需要修改nginx.conf

　　找到包含nginx.conf文件的目录。我们可以使用sudo whereis nginx.conf来查找路径并输入目录。

　　修改nginx.conf，输入以下命令：sudo vim nginx.conf然后，如果是第一次配置，可以直接复制我下面的代码。记得修改根目录下dist的路径。

　　如果之前已经配置了其他项目，只需将我的http中包含的服务器复制到你的文件对应的位置即可！

　　用户root

　　工作进程1

　　事件{

　　工人_连接1024；

　　}

　　http {

　　包括mime.types

　　default_type应用程序/八位字节流；

　　在上发送文件；

　　keepalive _ timeout 65

　　服务器{

　　听80；

　　server_name本地主机；

　　位置/{

　　root/home/Ubuntu/myapp/ruoyi/ruoyi-ui/dist；#将路径更改为您自己的dist路径

　　try _ files $ uri $ uri//index . html；

　　索引index.html index.htm；

　　}

　　位置/产品-api/{

　　proxy _ set _ header Host $ http _ Host；

　　proxy _ set _ header X-Real-IP $ remote _ addr；

　　proxy _ set _ header REMOTE-HOST $ REMOTE _ addr；

　　proxy _ set _ header X-Forwarded-For $ proxy _ add _ X _ Forwarded _ For；

　　proxy _ pass http://localhost:8080/；#设置用于监控后端启动的端口。

　　}

　　error _ page 500 502 503 504/50x . html；

　　location=/50x.html {

　　根html

　　}

　　}

　　然后保存并退出。

　　重启nginx

　　nginx -s重新加载

　　然后访问ip号就可以跑出页面了！

　　大功告成！

　　总结

　　这就是这篇关于用nginx部署vue项目的文章。关于使用nginx部署vue项目的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。