NGX部署vue项目的详细图形教程(Docker nginx部署vue)

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

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

nginx -v

然后启动nginx。

如果服务器nginx restart报告以下错误，请按照提示下载相关插件。

我在这里下载了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中包含的服务器复制到你的文件对应的位置即可！

用户rootworker _ processes 1 events { worker _ connections 1024；}http {包含mime.typesdefault_type应用程序/octet -流；在上发送文件；keepalive _ timeout 65服务器{监听80；server_name本地主机；location/{ root/home/Ubuntu/myapp/ruoyi/ruoyi -ui/dist；#将路径更改为您自己的dist path try _ files $ uri $ uri//index . html；索引index.html index.htm；} location/prod -API/{ proxy _ set _ header Host $ http _ Host；proxy _ set _ header X-real -IP $ remote _ addr；proxy _ set _ header remote -HOST $ remote _ addr；$proxy_add_x_forwarded_for的proxy _ set _ header X4 + Forwarded4 +;proxy _ pass http://localhost:8080/；#设置监控后端启动的端口} error _ page 500 502 503 504/50x . html；location =/50x . html { root html；}}然后保存并退出。

重启nginx

Nginx -s重装然后访问ip号跑出页面！！

你完了！

摘要

这就是这篇关于nginx部署vue项目的文章。关于nginx部署vue项目的更多信息，请搜索主机频道zhujipindao之前的文章。或者继续浏览下面的相关文章。希望大家支持主机频道zhujipindao。以后多来com！