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端口即可看到生成的网站

Logo

前往低代码交流专区

更多推荐