Nginx配置运行vue项目

1、构建 Vue 项目

在项目根目录运行npm run build命令，该命令会将该项目内的代码文件打包到dist文件夹内

2、服务器安装 Nginx

这部分网上教程很多，可以自行查找

有空再更

3、配置 nginx.conf

建议复制一份nginx.conf的副本
（1）移动到nginx的安装目录，作者的目标路径为/etc/nginx

（2）使用cp nginx.conf custom.conf命令创建一份名为custom.conf的nginx.conf的副本

（3）使用vim custom.conf 命令打开custom.conf，将server部分替换为以下内容：

server{
    # 监听端口
	listen 8081;
	# 服务器名字
	server_name localhost;
	# 服务器index.html界面路径（dist的路径）
	location / {
	    # dist文件夹的绝对路径
		root /root/KBM/KBM-Client/dist;
		# html文件名
        index index.html;
        autoindex on;
	}
	# 如果服务器需要跨域，设置跨域访问的路径（本服务器使用/api/路径访问位于3000端口的服务器）
   location /api/ {
         proxy_pass http://localhost:3000/;
   }
}

这里有个坑，刚配置完直接运行会报403 Forbidden错误。原因是运行nginx的用户与当前登录用户不一致，导致权限冲突

# 需要custom.conf将第一行的user设置为当前登录用户（此处为root）
user root;
worker_processes 4;
pid /run/nginx.pid;

4、运行

运行nginx -c /etc/nginx/custom.conf命令即可运行nginx服务器
运行nginx -s stop命令即可停止运行nginx服务器

5、查看效果

访问服务器8081端口即可看到生成的网站