Vue 打包发布Nginx配置

白图裘

已于 2022-08-19 10:18:05 修改

阅读量1.3k

点赞数 1

文章标签： vue.js nginx 前端

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

本文链接：https://blog.csdn.net/qq_35880671/article/details/125359767

版权

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;