1. 創建項目
npx degit dcloudio/uni-preset-vue#vite-ts [項目名稱]2.創建env目錄
多環境配置文件命名為.env.別名
添加index.d.ts
interface ImportMetaEnv{readonly VITE_ENV:string,readonly UNI_PLATFORM:string,readonly VITE_APPID:string,readonly VITE_NAME:stringreadonly VITE_VERSION:stringreadonly VITE_API_BASE_URL:string
}interface ImportMeta{readonly env:ImportMetaEnv;
}
3.修改vite.config.ts
import { defineConfig, loadEnv,type PluginOption } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import {resolve } from 'path'
import { copyToDeployDir } from "./post-build-plugin";
import { modifyVersion } from "./version-plugin";// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd()+"/env", ['VITE_']);return {envDir:resolve(__dirname, 'env'),plugins: [modifyVersion(mode,env),uni(),copyToDeployDir(mode,env)],resolve:{alias:{'@':resolve(__dirname, 'src')}}}
});post-build-plugin.ts文件內容為：
import { loadEnv,type PluginOption } from "vite";
import {resolve } from 'path';
import fs from 'fs-extra';//拷貝到發布目錄
export function copyToDeployDir(mode: string,baseEnv :Record<string,string>) : PluginOption {return{name: 'copy-to-deploy',enforce: 'post',async closeBundle() {try{if (!baseEnv.VITE_NAME) {throw new Error('VITE_NAME environment variable is not defined');}const nodeEnv = baseEnv.VITE_USER_NODE_ENV == "development" ? "dev":"build";// 路徑安全處理const sourceDir = resolve(__dirname, 'dist');const destDir = resolve(__dirname, 'deploy', baseEnv.VITE_NAME);await fs.copy(sourceDir, destDir, { overwrite: true });console.log(`? 文件已復制到: ${destDir}`);if(baseEnv.VITE_PLATFORM =="mp-toutiao"){await createPackageFile(destDir, nodeEnv, baseEnv);}await updateProjectFile(destDir, nodeEnv, baseEnv);} catch (error) {console.error('? 文件復制失敗:', error instanceof Error ? error.message : error);process.exit(1); // 構建失敗時退出}}}
}//創建package.json文件
async function createPackageFile(destDir:string, nodeEnv:string, env:Record<string,string>){const filePath = resolve(destDir, nodeEnv, env.VITE_PLATFORM,"package.json")const content = "{\"industrySDK\": true}";await fs.writeFile(filePath, content);console.log(`? package.json文件已創建`);
}//更新項目 appid ,項目名稱
async function updateProjectFile(destDir:string, nodeEnv:string,env:Record<string,string>){const filePath = resolve(destDir, nodeEnv, env.VITE_PLATFORM,"project.config.json")const content = fs.readFileSync(filePath, 'utf8');const newContent = content.replace('TT_APPID', env.VITE_APPID).replace('TT_NAME',env.VITE_NAME);console.log(newContent)await fs.writeFile(filePath, newContent);
}4.編譯命令執行
pnpm run dev:mp-toutiao-別名注：package.json中需將編譯命令添加
"dev:mp-toutiao-別名": "uni -p mp-toutiao --mode 別名",5.完整多環境配置工程
playlet: uniapp + typescript + pina 創建小程序，支持多環境導出小程序
)
