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;
	# }
}
相关推荐
爱分享的程序员6 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘11 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出13 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的13 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解16 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵19 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im20 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man20 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下35 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构