如何将Vue项目部署到nginx

条件：

系统：Linux操作系统
Linux系统中已经安装了nginx。如果未安装配置好，请先安装配置
项目是vue

1.打包Vue项目

在vue项目的目录下，进入cmd，输入

npm run build

打包完成后会生成一个dist文件夹。

2.将dist文件加放到ECS服务器中

注意：不要将dist文件放到/root目录里面。如果放到了/root目录下，最终运行的时候会报403的错误。还要将dist的权限设置成755，否则可能会权限不支持导致403

3.配置nginx.conf文件

我的nginx.conf放在的是/user/local/nginx/conf目录下

server {
	listen			8081;  #端口号
	server_name		localhost;	# 主机号，一般是localhost

	location / {
		root		/app/dist;	#前端dist文件夹路径
		index		index.html	index.htm;	# dist文件夹里的有的运行主页面文件
		try_files $uri $uri/ /index.html last;	#防止刷新页面404
	}
}

检查nginx.conf是否有语法错误

nginx -t

4.启动nginx服务

systemctl start nginx.service

在浏览器输入xxx.xxx.xxx.xxx:8081就ok了