使用Vite搭建的Vue2项目生产环境如何正确配置静态资源路径？

问题1：public文件夹静态资源适配部署前缀 #

修改vite.config.js中的base字段为你的实际部署子路径即可，vite打包时会自动给所有静态资源拼接该前缀：

export default defineConfig({
  // 替换为你实际的部署前缀，前后都需要加斜杠
  base: '/xxx/xxx/xxx/',
  // 其余配置保持不变
})

注意：引用public下的资源时不要带public前缀，直接写/static/img/xxx.png格式即可，打包后会自动和base拼接成目标路径

问题2：自定义static文件夹路径引用说明 #

当前用相对路径../../static/img/xxx.png引入的方式是符合vite打包规则的，打包后路径正常无需额外调整，也可以配合下面的别名配置简化引用写法。

问题3：路径别名不生效修复 #

vite的路径别名解析仅对静态资源引入逻辑生效，直接把别名写在普通字符串里不会触发解析规则，按以下两步调整即可：

1. 首先将*别名改为更明确的命名，避免和全局匹配规则冲突：

resolve: {
  alias: {
    "@": join(__dirname, "src"),
    "~": join(__dirname, "src/components"),
    // 替换*为@img，避免规则冲突
    "@img": join(__dirname, "static/img"),
  }
}

2. 引入资源时使用import或者new URL的写法触发别名解析：

// 静态引入写法
import test from '@img/xxx/xxx.png'

// 动态引入写法
const test = new URL('@img/xxx/xxx.png', import.meta.url).href

内容的提问来源于stack exchange，提问作者Craig-cheng