vue 前端部署步骤

最新推荐文章于 2025-06-11 16:58:48 发布

原创最新推荐文章于 2025-06-11 16:58:48 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

笔记专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Vue.js项目的前端部署流程，从进入项目目录，调整vue.config.js配置以适配本地开发的后端接口，到执行打包命令生成生产环境所需静态文件，最后将这些文件部署到Nginx服务器，并通过编辑nginx.conf配置文件设置index.html作为后台服务的入口页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cd /workspace/Rouyi-Vue/rouyi-ui

本地启动可以修改 vue.config.js 中后端接口。

vim vue.config.js

打包生产环境

npm run build:prod
mkdir /data/app/rouyi
mv dist/* /data/app/rouyi

将生成好的静态文件发布到nginx, index.html 为后台服务的入口页面
vim nginx/conf/nginx.conf

location / {
	root /data/app/rouyi
	try_files $uri $uri/ /index.html
	index 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-set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_pass http://localhost:8080/;
}