主要代码

在 nginx 中添加 try_files 指令

1
2
3

location / {
  try_files $uri $uri/ /index.html;
}

如果是子目录

假设目录是 /front

1
2
3

location /front {
  try_files $uri $uri/ /front/index.html;
}

同时在 vue vue.config.ts 中设置 publicPath

1
2
3
4

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: "/front",
})

说明

try_files

语法：try_files file … uri 或 try_files file … = code
默认值：无
作用域：server location

其作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。

需要注意的是，只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部 URI 的指向。最后一个参数是回退 URI 且必须存在，否则会出现内部 500 错误。命名的location也可以使用在最后一个参数中。与rewrite指令不同，如果回退 URI 不是命名的location那么args不会自动保留，如果你想保留 args 则必须明确声明。