uni-app Vite alias与uni静态资源冲突

在 uni-app 项目中，使用 Vite 作为构建工具时，可能会遇到 alias（路径别名）与 uni-app 静态资源路径冲突的问题。这种冲突通常发生在你自定义了 alias，而这些别名与 uni-app 默认的静态资源路径（如 @/、/static/ 等）重叠或冲突。

问题描述

uni-app 默认的静态资源路径如下：

• @/ 指向 src/ 目录。
• /static/ 指向项目根目录下的 static 文件夹。

如果你在 Vite 中自定义了 alias，并且这些别名与 uni-app 的默认路径冲突，可能会导致资源加载失败或路径解析错误。

解决方案

1. 避免路径冲突
   在定义 alias 时，尽量避免使用与 uni-app 默认路径相同的别名。例如，如果你已经使用了 @/，就不要再用 @ 作为其他路径的别名。

2. 自定义 alias
   如果你确实需要自定义 alias，可以通过 vite.config.js 配置文件来实现。确保你的别名不会与 uni-app 的默认路径冲突。

   import { defineConfig } from 'vite';
   import path from 'path';
   
   export default defineConfig({
     resolve: {
       alias: {
         // 自定义别名
         '@components': path.resolve(__dirname, 'src/components'),
         '@utils': path.resolve(__dirname, 'src/utils'),
       },
     },
   });
   

   在这个例子中，@components 和 @utils 是自定义的别名，它们不会与 uni-app 的默认路径冲突。

3. 处理静态资源路径
   如果你需要使用 uni-app 的静态资源路径（如 @/ 或 /static/），确保在代码中正确使用这些路径。例如：

   // 使用 @/ 别名
   import MyComponent from '@/components/MyComponent.vue';
   
   // 使用 /static/ 路径
   const imageUrl = '/static/logo.png';