uni-app
uni-app x
uniCloud
HBuilder X
uni 小程序 sdk
uni-ad广告
开发者服务
uni-app
uni-app x
uniCloud
HBuilder X
uni 小程序 sdk
uni-ad广告
开发者服务
uni-app
简体中文
GitHub
全局文件
配置开发 HTTPS
注意事项

vite.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 vite 的编译选项，具体规范参考：vite.config.js

支持情况

注意事项

  • 仅vue 3项目生效

部分配置项会被编译配置覆盖，例如：

  • base：web 平台支持
  • root：不支持
  • mode：不支持
  • publicDir: 不支持，固定为 static
  • build.outDir：不支持
  • build.assetsInlineLimit：仅 h5 支持
  • build.cssCodeSplit：不支持，固定为 true
  • build.lib：不支持
  • build.manifest：不支持
  • build.ssrManifest：不支持
  • build.ssr：不支持

基础内容

必须引用 '@dcloudio/vite-plugin-uni' 并且添加到 plugins 中

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
	plugins: [uni()],
});

使用示例

自定义静态资源目录

import path from 'path';
import fs from 'fs-extra'; // fs-extra 为三方库，需安装依赖
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

function copyFile() {
	return {
		enforce: 'post',
		async writeBundle() {
			await fs.copy(
				path.resolve(__dirname, 'images'),
				path.join(
					__dirname,
					'unpackage/dist',
					process.env.NODE_ENV === 'production' ? 'build' : 'dev',
					process.env.UNI_PLATFORM,
					'images'
				)
			);
		},
	};
}

export default defineConfig({
	plugins: [uni(), copyFile()],
});

注入全局依赖

// 示例从插件市场下载 mp-storage
import path from 'path';
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import inject from '@rollup/plugin-inject';

const mpStoragePath = path.resolve(__dirname, './js_sdk/mp-storage/mp-storage');

export default defineConfig({
	plugins: [
		uni(),
		inject({
			localStorage: [mpStoragePath, 'localStorage'],
			'window.localStorage': [mpStoragePath, 'localStorage'],
		}),
	],
	define: {
		'process.env.VUE_APP_TEST': JSON.stringify('test'),
	},
});

配置环境变量

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
	plugins: [uni()],
	define: {
		'process.env.VUE_APP_TEST': JSON.stringify('test'),
	},
});

注意：在 HBuilderX 中读取 .env 环境变量可以通过 loadEnv 获取，注意第二个参数不要使用 processs.cwd()， 第二个参数需要填写配置文件所在的绝对路径： const env = loadEnv(mode, __dirname);

发布时删除 console

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
	plugins: [uni()],
	build: {
		minify: 'terser',
		terserOptions: {
			compress: {
				drop_console: true,
			},
		},
	},
});

发布时动态修改 manifest.json

// 读取 manifest.json ，修改后重新写入
import fs from 'fs';

const manifestPath = './src/manifest.json';
let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' });
function replaceManifest(path, value) {
	const arr = path.split('.');
	const len = arr.length;
	const lastItem = arr[len - 1];

	let i = 0;
	let ManifestArr = Manifest.split(/\n/);

	for (let index = 0; index < ManifestArr.length; index++) {
		const item = ManifestArr[index];
		if (new RegExp(`"${arr[i]}"`).test(item)) ++i;
		if (i === len) {
			const hasComma = /,/.test(item);
			ManifestArr[index] = item.replace(
				new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`),
				`"${lastItem}": ${value}${hasComma ? ',' : ''}`
			);
			break;
		}
	}

	Manifest = ManifestArr.join('\n');
}
// 使用
replaceManifest('app-plus.usingComponents', false);
replaceManifest('app-plus.splashscreen.alwaysShowBeforeRender', false);
replaceManifest('mp-baidu.usingComponents', false);
fs.writeFileSync(manifestPath, Manifest, {
	flag: 'w',
});

export default defineConfig({
	// ...
});

启用压缩的方法：

  • HBuilderX 创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
  • cli 创建的项目可以在package.json中添加参数--minify

# 配置开发 HTTPS

在 HBuilderX 中通过 manifest.json 启用 web 端 HTTPS 时，开发服务器使用的是仅用于调试的证书，浏览器通常不会将其识别为受信任证书，因此可能出现“连接不安全”之类的提示。该方式适合快速启动本地 HTTPS 调试，但不适用于需要指定证书文件、对接本地受信任证书链，或进行更严格联调验证的场景。

如果需要使用开发者自行生成的证书，请不要继续在 manifest.json 中配置 HTTPS，而应改为在项目根目录新增 vite.config.js，通过 Vite 的 server.https 进行显式配置。同时，请删除 manifest.json 中与 web 端 HTTPS 相关的配置，避免与 vite.config.js 中的设置重复或产生冲突。

示例配置如下：

// vite.config.js
import fs from 'fs'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
  server: {
    https: {
      key: fs.readFileSync('./cert/localhost-key.pem'),
      cert: fs.readFileSync('./cert/localhost.pem'),
    },
  },
})

证书文件路径请按项目实际情况调整。完成配置后，重新运行到 web 端即可使开发服务器使用指定证书。

# 注意事项

  • 在 Mac M1 系列芯片电脑安装 lightningcss 等包含不同 CPU 架构二进制文件 npm 包的时候，会提示 Cannot find module '../lightningcss.darwin-x64.node'，可以下载 HBuilderX Arm 版本规避此类问题。
本页导读
配置开发 HTTPS
注意事项