前端部署

部署到 nginx

打包项目

# 打包正式环境
npm run build:prod
# 打包预发布环境
npm run build:stage

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 .js 、.css、index.html 等静态文件。

通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可，其中的 index.html 是后台服务的入口页面。

环境变量（补充：新手不必看这里）

所有测试环境或者正式环境变量的配置都在 .env.development 等 .env.xxxx 文件中。

它们都会通过 webpack.DefinePlugin 插件注入到全局。

环境变量必须以 VUE_APP为开头。如: VUE_APP_BASE_API 你在代码中可以通过如下方式获取process.env.VUE_APP_BASE_API

注意

Vue3 是 VITE 开头 console.log(import.meta.env.VITE_APP_BASE_API)

配置 nginx

在 ngnix/config/nginx.conf(实际地址以你安装为准) http 模块中添加以下配置文件
在 nginx 安装目录中的 html 目录中创建文件夹 zradmin 或者其他目录
将打包后的dist 文件夹上传到刚刚创建的 zradmin 中
浏览器中访问 http://域名/外网IP:port

server {
	#修改要监听的端口
	listen 80;
	#修改要绑定的域名或IP地址
 	server_name 域名/外网IP; # 例如：www.xxx.com/0.0.0.0

	# vue项目配置
	location / {
		root html/zradmin/dist; #修改成你发布的文件夹路径
		index index.html;
		# 避免出现404
		try_files $uri $uri/ /index.html;
	}

	# redirect server error pages to the static page /50x.html
	error_page 500 502 503 504  /50x.html;
	location = /50x.html {
		root html;
	}
}

二级目录配置

打包配置修改前端项目根目录下的.env.production 键值，如下

VUE_APP_ROUTER_PREFIX = "/admin";

VITE_APP_ROUTER_PREFIX = "/admin/";

nginx 配置

server {
	#修改要监听的端口
	listen 80;
	#修改要绑定的域名或IP地址
	server_name [www.yourdomain.com] 0.0.0.0;

	# charset koi8-r;
	access_log  logs/logs.access.log  main;

	# vue项目配置
	location /admin {
		alias html/zradmin/dist;
		index index.html;
		try_files $uri $uri/ /admin/index.html;
	}
}

重启 nginx

浏览器中输入 http://www.yourdomain.com/admin

部署到 iis

请参考后端部署

nginx 完整配置参考

server {
	#修改要监听的端口
	listen 80;
	#修改要绑定的域名或IP地址
 	server_name 域名/外网IP;

	# charset koi8-r;
	# access_log  logs/logs.access.log  main;

	# vue项目配置
	location / {
		#linux 路径
		root html/zradmin/dist;
		#windows下路径
		#alias d:/home/website/zradmin/dist;
		index index.html;
		# 避免出现404
		try_files $uri $uri/ /index.html;
	}

	# 后端接口
	# 正式环境对应前端打包运行命令 npm run build:prod
	location /prod-api/ {
		proxy_pass  http://localhost:8888/;

		# 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 	 }

	# signalR
	location ~* ^/msgHub {
		proxy_pass  http://localhost:8888;   #注意后面没有/
		#后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		#启用http长连接支持websocket
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
	}
}

注意

windows 下前端部署路径不能有中文、空格
Windows 下前端部署路径要使用 alias，比如： #alias d:/home/website/zradmin/dist;

扩展

文件存储访问参数设置，访问路径需要设置为 http://www.xxx.com/uploads 不用清忽略，仅作为学习记录

location /uploads {
	# 设置资源存储路径地址
	root	D:/home/website;
	# linux下对应 /home/website

	autoindex on;
}

配置文件修改

"Upload": {
	"uploadUrl": "http://www.izhaorui.cn/uploads", //本地存储资源网络访问路径
	"localSavePath": "/home/website/uploads",
	"maxSize": 15, //上传文件大小限制 15M
	"notAllowedExt": [ ".bat", ".exe", ".jar", ".js" ]
}

https 配置

1、申请 https 域名证书

通过阿里云或者腾讯云购买

2、在 nginx 中创建 ssl 目录这里路径是 /usr/local/nginx/conf/ssl

[root@VM-16-4-centos ssl]# ls
www.izhaorui.cn.key  www.izhaorui.cn.pem

3、将以下代码添加到配置文件

server {
	listen       443 ssl;
	server_name  www.izhaorui.cn;

	# 证书文件
	ssl_certificate      ssl/www.izhaorui.cn.pem;
	# 证书秘钥
	ssl_certificate_key  ssl/www.izhaorui.cn.key;

	ssl_session_cache    shared:SSL:1m;
	ssl_session_timeout  5m;

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_ciphers  ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
	ssl_prefer_server_ciphers  on;
}

前端打包一键上传

rsa 公钥生成

打包传送门

代码案例

注意

部署到 linux 的小伙伴，注意应用程序不要放到 /root目录
部署到 Windows 服务的，重启 nginx 时配置修改无效，注意进程数量是否有多个，如果有多个全部杀掉，重新启动 nginx
nginx 在 Windows 下路径不能有特殊符号，空格