5d06560a08a4d9e45c8a9e0d1b37140100c71e57
Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.
Project NodeJS Version: v20.18.3
Run dev commands:
npm run dev
Run build commands:
npm run build
对于Nginx服务器需要添加以下配置:
找到你站点 Nginx 配置文件(通常在 /etc/nginx/conf.d/xxx.conf 或 /etc/nginx/sites-available/xxx),在 location / 块中添加 try_files:
server {
listen 80;
server_name your-domain.com;
root /你的部署目录/dist; # 指向你构建产物的目录
index index.html;
location / {
try_files $uri $uri/ /index.html; # 关键配置
}
# 静态资源缓存(可选,提升性能)
location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
核心就是这一行:
try_files $uri $uri/ /index.html;
它的含义是:
- 先尝试查找请求的文件(
$uri) - 再尝试查找请求的目录(
$uri/) - 都找不到就返回
index.html,让 Vue Router 接管路由
生效步骤
修改完配置后,执行:
# 检查配置语法是否正确
nginx -t
# 重新加载配置(无需重启)
nginx -s reload
配置生效后,直接访问 /help 就不会再 404 了。
Description
0.1.1-RELEASES
Latest
Languages
Vue
91.5%
JavaScript
6.4%
HTML
2.1%