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;
	# }
}
相关推荐
brief of gali3 分钟前
记录一个奇怪的前端布局现象
前端
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome