vite打包静态资源时，默认的是以/assets/开头，但是有时候我们需要增加前缀，保证nginx能够正确的托管静态资源。

配置

// vite.config.js
export default defineConfig({
  base:'/ios-shortcuts/', // 静态资源前缀
})

然后在模板文件中使用这个前缀：

<!-- index.html -->
<img src="/my-app/assets/logo.png" alt="logo">

<!-- 经过编译后的文件中 -->
<img src="/ios-shortcuts/assets/img/logo-ed15393f.png" alt="logo">

应用

如下是我项目的nginx部分配置，访问 http://dzbook.top/ios-shortcuts时就可以访问到/home/loster/mixms/shortcuts-ui/目录下的静态网页内容。

如果不加前缀的话，访问静态资源时，都是默认的路径，http://dzbook.top/asset/xxx.js等等，而不是我们需要的http://dzbook.top/ios-shortcuts/asset/xxx.js，这就会导致无法正确加载静态资源，页面无法正确渲染。

server {
    listen       80;
    server_name  dzbook.top;

    location /ios-shortcuts {
        alias /home/loster/mixms/shortcuts-ui/;
        index index.html;
    }
    
    // ````其他配置
    
}