Uni App Vite 项目基础配置

封装 vite.config.ts 的基本配置，开箱即用。

如何使用

安装

pnpm add @plugin-light/project-config-uni-vite -D

在 vite.config.ts 中添加如下设置：

import { getUniVue3ViteConfig } from '@plugin-light/project-config-uni-vite';

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  return getUniVue3ViteConfig({ mode });
});

参数

import type { Plugin } from 'vite';


export interface IUniViteConfigOptions {
  mode: string;
  uni: any;

  // 端口，传递给 server.port
  port?: number;
  // https 配置，传递给 server.https
  https?: Record<string, any>;
  // host 配置，传递给 server.host
  host?: boolean;

  // 前置插件
  prePlugins?: Array<Plugin>;
  // 后置插件
  postPlugins?: Array<Plugin>;
}

注意事项

1. node.js 版本 >= 16

2. 支持在环境变量文件中配置 VUE_APP_DIR，环境变量文件可以是 .env, .env.local 等，举例如下：

UNI_INPUT_DIR = './src/project/guandan-match'
VUE_APP_DIR = project/guandan-match

对外脚本

本插件导出了几个脚本，外部可以使用。

1. 修复 uni-app 中 monorepo 仓库下打包路径问题

原理是修改了 node_modules/@dcloudio/uni-cli-shared/dist/utils.js 源码中的 normalizeNodeModules 方法，增加了下面这句：

str = str.replace(/^[./]*/, '');

使用方式：

require('@plugin-light/project-config-uni-vite/public-script/uni/fix-uni-dir');

2. 修复 uni-app 小程序下样式文件变化无法重新编译的问题

小程序开发时，独立的 sass 文件改动后并不会重新编译，用一个全新的示例工程也不可以。看了下源码，uni-app 是用 import('vite').then({build}=>{}) 这种方式来启动的。

解决办法是利用 gulp.watch，监听 ./src/**/*.scss 文件，然后修改下 main.ts，然后这样就能重新编译了。同时加上了 debounce。

使用方式：

require('@plugin-light/project-config-uni-vite/public-script/watch/watch-sass')();

更新日志

点此查看