Vue 打包发布Nginx配置

白图裘

已于 2024-06-04 16:25:09 修改

阅读量1.5k

点赞数 1

分类专栏： nginx 文章标签： Vue打包 Nginx配置前端部署静态资源代理规则

于 2022-06-19 17:10:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35880671/article/details/125359767

版权

nginx 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用Vue CLI进行项目打包，包括切换到package.json所在目录并运行npm run build命令。打包完成后，重点讲解了Nginx的配置，如设置监听端口、服务器名称、处理静态资源及错误页面。此外，还特别提到了针对若依项目配置的代理规则，以及解决刷新导致的500和404错误的方法。

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

vue 打包

//切换目录到package.json点目录下
npm run build   //有时候是 build:prod  主要看你package.json>scripts>vue-cli-service build 的key是啥
//完事之后dist文件下就是所有的资源文件继续配置就完了

修改config

listen       80; #这里跟前端配置的端口有关
server_name  localhost;
#验证域名时 可加上域名地址
#server_name  localhost www.test.com;
# 将dist文件放到Nginx 的hml文件下(推荐)
 location / {
	root	html/dist;
    index  index.html index.htm;
	try_files $uri $uri/ /dist/index.html;
 }
# 如果你是若依项目请加上下面的代码 如果不是请忽略
# http://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html#nginx%E9%85%8D%E7%BD%AE
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/;
}
# 申请ssl证书可能会用到
location = /.well-known/pki-validation/ {
	default_type	"text/plain";
	#上面的/ root配置到的位置是html/dist 在其文件夹下创建/.well-known/pki-validation/xxxx.txt即可
	root	/.well-known/pki-validation/;
	index	index.html index.htm;
}
# 下面的配置解决在某个界面重复刷新500 404的bug
error_page   500 502 503 504 404  /dist/index.html;
location = /dist/index.html {
	root   html;
}
#error_page  404              /404.html;