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...
·
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端口即可看到生成的网站
更多推荐
已为社区贡献4条内容
所有评论(0)