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;
	# }
}
相关推荐
我要洋人死43 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#