uni-app 编译为微信小程序时 vite.config.ts 的 base 配置项无效

uni-app 编译为微信小程序时 vite.config.ts 的 base 配置项无效

操作步骤：

  • 在vite.config.ts中添加base配置项，内容为网络地址，执行npm run build:mp-weixin命令

预期结果：

  • 打包出来的结果中所有引用本地资源的地址均根据base发生变更

实际结果：

  • 引用本地资源的地址未发生变更，依然引用本地地址

bug描述：

  • 在vite.config.ts中加入base配置项后，在编译为微信小程序时不生效，而编译为h5时则正常生效。
  • 不知道是否微信小程序一开始就不支持该配置项，但我还是希望支持。这样可以缩减主包体积，并且可以在打包为生产环境后统一将资源上传到服务器中，不需要在开发时就将资源上传，资源地址也不用写成非常长的网络地址

更多关于uni-app 编译为微信小程序时 vite.config.ts 的 base 配置项无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 编译为微信小程序时 vite.config.ts 的 base 配置项无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 项目中，使用 Vite 作为构建工具时，vite.config.ts 中的 base 配置项用于指定项目的公共基础路径。然而，在编译为微信小程序时，base 配置项可能会无效，原因如下：

1. 微信小程序的特殊性

微信小程序有其独特的文件结构和资源加载机制，与传统的 Web 应用不同。微信小程序的资源路径是相对于项目根目录的，而不是基于 Web 服务器的根目录。因此，base 配置项在微信小程序中可能不会生效。

2. uni-app 的构建流程

uni-app 在编译为微信小程序时，会将项目中的资源文件（如静态文件、图片等）按照微信小程序的规范进行处理。vite.config.ts 中的 base 配置项主要用于 Web 应用的构建，而在小程序构建流程中，uni-app 可能会忽略或覆盖这个配置。

解决方案

1. 使用 uni-app 的静态资源处理方式

在 uni-app 中，静态资源通常放在 static 目录下，并且可以直接通过相对路径引用。例如：

<image src="/static/logo.png"></image>

2. 使用 vite 的 assetsDir 配置

如果你需要将静态资源放在特定的目录下，可以使用 vite.config.ts 中的 assetsDir 配置项，而不是 base：

export default defineConfig({
  build: {
    assetsDir: 'static', // 将静态资源放到 static 目录下
  },
});

3. 使用 uni-app 的 publicPath 配置

在 uni-app 项目中，你可以通过 manifest.json 或 vue.config.js 来配置 publicPath，而不是依赖于 vite.config.ts 中的 base：

{
  "h5": {
    "publicPath": "/"
  },
  "mp-weixin": {
    "publicPath": "./"
  }
}

4. 手动处理路径

如果 base 配置项确实无效，你可以手动处理资源路径。例如，在 vue 组件中，使用相对路径或动态路径来引用资源：

<image :src="imagePath"></image>

export default {
  data() {
    return {
      imagePath: '/static/logo.png',
    };
  },
};
回到顶部