100 lines
2.5 KiB
Markdown
100 lines
2.5 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
|
||
```
|
||
|
||
## 部署配置
|
||
|
||
本项目使用 Vue Router 的 History 模式，部署时需要配置服务器将所有非静态文件的请求回退到 `index.html`，否则直接访问子路由（如 `/help`）会返回 404。
|
||
|
||
### 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";
|
||
}
|
||
}
|
||
```
|
||
|
||
核心配置 `try_files $uri $uri/ /index.html;` 的含义：
|
||
1. 先尝试查找请求的文件（`$uri`）
|
||
2. 再尝试查找请求的目录（`$uri/`）
|
||
3. 都找不到就返回 `index.html`，让 Vue Router 接管路由
|
||
|
||
修改完配置后，执行以下命令使其生效：
|
||
|
||
```bash
|
||
# 检查配置语法是否正确
|
||
nginx -t
|
||
|
||
# 重新加载配置（无需重启）
|
||
nginx -s reload
|
||
```
|
||
|
||
### Apache
|
||
|
||
在构建产物 `dist` 目录下创建 `.htaccess` 文件，内容如下：
|
||
|
||
```apache
|
||
<IfModule mod_rewrite.c>
|
||
RewriteEngine On
|
||
RewriteBase /
|
||
|
||
# 如果请求的是真实存在的文件或目录，直接访问
|
||
RewriteCond %{REQUEST_FILENAME} !-f
|
||
RewriteCond %{REQUEST_FILENAME} !-d
|
||
|
||
# 否则全部转发到 index.html
|
||
RewriteRule . /index.html [L]
|
||
</IfModule>
|
||
```
|
||
|
||
注意事项：
|
||
|
||
1. 确保 `mod_rewrite` 模块已启用：
|
||
```bash
|
||
sudo a2enmod rewrite
|
||
sudo systemctl restart apache2
|
||
```
|
||
|
||
2. 确保站点配置中允许 `.htaccess` 覆盖配置：
|
||
```apache
|
||
<Directory /你的部署目录/dist>
|
||
Options Indexes FollowSymLinks
|
||
AllowOverride All
|
||
Require all granted
|
||
</Directory>
|
||
```
|
||
|
||
3. 修改完后重启 Apache：
|
||
```bash
|
||
sudo systemctl restart apache2
|
||
```
|