66 lines
1.6 KiB
Markdown
66 lines
1.6 KiB
Markdown
# 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](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||
|
||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||
|
||
Project NodeJS Version: `v20.18.3`
|
||
|
||
### Run dev commands:
|
||
```shell
|
||
npm run dev
|
||
```
|
||
|
||
### Run build commands:
|
||
```shell
|
||
npm run build
|
||
```
|
||
|
||
### 对于Nginx服务器需要添加以下配置：
|
||
|
||
找到你站点 Nginx 配置文件（通常在 `/etc/nginx/conf.d/xxx.conf` 或 `/etc/nginx/sites-available/xxx`），在 `location /` 块中添加 `try_files`：
|
||
|
||
```nginx
|
||
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";
|
||
}
|
||
}
|
||
```
|
||
|
||
**核心就是这一行：**
|
||
|
||
```nginx
|
||
try_files $uri $uri/ /index.html;
|
||
```
|
||
|
||
它的含义是：
|
||
1. 先尝试查找请求的文件（`$uri`）
|
||
2. 再尝试查找请求的目录（`$uri/`）
|
||
3. 都找不到就返回 `index.html`，让 Vue Router 接管路由
|
||
|
||
## 生效步骤
|
||
|
||
修改完配置后，执行：
|
||
|
||
```bash
|
||
# 检查配置语法是否正确
|
||
nginx -t
|
||
|
||
# 重新加载配置（无需重启）
|
||
nginx -s reload
|
||
```
|
||
|
||
配置生效后，直接访问 `/help` 就不会再 404 了。
|