稷然如此

  • 首页
  • 文章分类
    • AI
    • Android
    • Java
    • Shell
    • Vue
    • C#
    • Python
    • 数据库
    • 组件
    • 其他
    • Game
  • 常用命令
    • Docker
    • Git
    • Linux
  • 操作系统
    • CentOS
    • Ubuntu
    • Windows
    • Kylin
  • 工具
    • IntelliJ IDEA
    • Visual Studio Code
稷然如此
不积跬步,无以至千里
  1. 首页
  2. 文章分类
  3. Vue
  4. 正文

CentOS 下使用 Nginx 部署 Vue 项目(SSL版)

2023年10月11日 1239点热度 0人点赞

1.安装部署Nginx

参考:CentOS 启动 Nginx

2.编译vue项目

将生成的目录拷贝至自己想放的目录,这里我在/home目录下创建了/www目录,www目录下用于存放编译好的vue生成目录。

3.配置Nginx

server {
	listen          80;
	server_name     xxx.xxx.com;
	return 301 https://$server_name$request_uri;
}

server {
	listen                          443 ssl;
	server_name                     xxx.xxx.com;
	ssl_certificate                 ../cert/xxx.pem;
	ssl_certificate_key             ../cert/xxx.key;
	ssl_session_timeout             5m;
	ssl_protocols                   TLSv1 TLSv1.1 TLSv1.2;
	ssl_ciphers                      ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4:!DHE;

	location / {
			root    /home/www/dist;	# vue编译后的dist目录
			index   index.html;	# vue dist目录下的index.html
			try_files $uri $uri/ /index.html;	# 刷新页面不会404
	}

	location /proxy-api { # 处理代理请求,因为vue项目里的proxy设置了proxy-api路由地址
			rewrite ^.+proxy-api/?(.*)$ /$1 break;	# 反向代理,替换proxy前缀
			include uwsgi_params;
			proxy_pass      https://xxxx.xxxx.com;	# 接口地址
	}

	error_page 404 /404.html;
	location = /40x.html {

	}

	error_page 500 502 503 504 /50x.html;
	location = /50x.html {

	}
}

 

4.访问https://xxx.xxx.com即可
标签: CentOS centos部署vue Nginx ssl vue 部署vue
最后更新:2023年10月11日

Akim

犇 骉 Java、C#、Python、Go、Android、MiniProgram、Bootstrap、Vue2

点赞
下一篇 >
文章目录
  • 1.安装部署Nginx
  • 2.编译vue项目
  • 3.配置Nginx

Copyright © 2025 aianran.com All Rights Reserved.

免责申明 | 隐私政策 | 服务条款 | 关于我们

黔ICP备2023008200号-1

贵公网安备 52010202003594号