vue3打包配置 vite、router、nginx配置

目录

vue3项目打包需要注意的几个要点

有时候遇到新项目会忘记配置某些细节,导致经常花费一些时间去找问题

写个文章集中记录一下方便后续查找

vite配置

vite.config.js 文件

base路径默认为根路径 / ,需修改为对应的部署目录路径 /project/

javascript 复制代码
return {
	base: '/project/', // 需要前后/符号,否则路由配置不适用
	// base: env.VITE_BASE_PATH, // 保证.env.prod文件内 VITE_BASE_PATH = 'project/'
	...
}

router路由配置

/router/index.js 文件

默认 createWebHistory() 不带参数,需传参为对应的部署目录路径 "/project/"

javascript 复制代码
const router = createRouter({
	history: createWebHistory("/project/"),
	// history: createWebHistory(import.meta.env.VITE_BASE_PATH), // 保证.env.prod文件内 VITE_BASE_PATH = 'project/'

	// 或设置基础路径,选择其一即可
	// base: 'project/', // 斜杠/结尾
	// base: import.meta.env.VITE_BASE_PATH,
	...
})

nginx配置

写给小白:服务器配置,非前端配置

nginx.conf 文件

此处给两种配置方式

配置一、多服务代理每个项目

【推荐】

nginx 复制代码
server {
	listen 80;
	server_name xxingqiu.com;
	charset utf-8;

	location / {
		root html;
		index index.html index.htm;
	}

	location /project {
		proxy_pass http://127.0.0.1:40000; # 代理服务
	}
}

server {
	listen 40000;
	server_name project;
	charset utf-8;
	root /usr/local/nginx/html/project;

	location /project {
		alias /usr/local/nginx/html/project;
		try_files $uri $uri/ /index.html;
	}
}

配置二、同一服务多项目

【不推荐,易发生未知问题】
但我用的是这个,无他,唯手懒尔

nginx 复制代码
server {
	listen 80;
	server_name xxingqiu.com;
	charset utf-8;
	root html; # 保证根路径

	location / {
		root html;
		index index.html index.htm;
	}

	# 根域名默认访问项目1,配置为子文件夹/project_1
	# location / {
	# 	root html/project_1;
	# 	index index.html index.htm;
	# 	try_files $uri $uri/ /index.html;
	# }

	# 项目2
	location /project_2 {
		index index.html index.htm;
		try_files $uri $uri/ /project_2/index.html;
	}

	# location @router {
	#     rewrite ^.*$ /index.html last;
	# }
}
相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
软件2058 小时前
【vue3主题切换】
vue
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui