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;
	# }
}
相关推荐
梁bk30 分钟前
[Nginx]反向代理和负载均衡
运维·nginx·负载均衡
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css