參考C語言的，詳細如下：

• 大量寫 if else，會造成程式碼執行效能低下和管理混亂。
• 編譯到不同的工程後二次修改，會讓後續升級變的很麻煩。

在 C 語言中，通過 #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的程式碼。uni-app參考這個思路，為uni-app提供了條件編譯手段，在一個工程裡優雅的完成了平臺個性化實現。

條件編譯是用特殊的註釋作為標記，在編譯時根據這些特殊的註釋，將註釋裡面的程式碼編譯到不同平臺。

寫法：以#ifdef或#ifndef加%PLATFORM%開頭，以#endif結尾。

• #ifdef：if defined 僅在某平臺存在
• #ifndef：if not defined 除了某平臺均存在
• %PLATFORM%：平臺名稱

例子：

%PLATFORM%可取值如下：

支援的檔案

• .vue
• .js
• .css
  • • pages.json　　　　這個用的比較少
• 各預編譯語言檔案，如：.scss、.less、.stylus、.ts、.pug

注意：

• 條件編譯是利用註釋實現的，在不同語法裡註釋寫法不一樣，js使用// 註釋、css 使用/* 註釋 */、vue/nvue 模板裡使用<!-- 註釋 -->；
• 條件編譯APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE沒什麼區別，為了簡寫後面出了APP-NVUE ；
• 使用條件編譯請保證編譯前和編譯後檔案的正確性，比如json檔案中不能有多餘的逗號；
• VUE3需要在專案的manifest.json檔案根節點配置"vueVersion" : "3"

上面說那麼多 現在開始實戰，我們分別以vue 、js 、 css 來寫：

<template>
    <view>
        
        <!-- #ifdef H5 -->
        <view>這行文字 只有在H5的環境下才能被看到！</view>
        <!--#endif-->
        
        <!-- #ifdef MP -->
        <view>這行文字 只有在小程式(微信小程式/支付寶小程式/百度小程式/位元組跳動小程式/QQ小程式/360小程式)的環境下才能被看到！</view>
        <!--#endif-->
        
        <!-- #ifdef APP-PLUS -->
        <view>這行文字 只有在IOS / 安卓的環境下才能被看到！</view>
        <!--#endif-->
        
        <!-- #ifndef MP  -->
        <view>這行文字 只有在IOS / 安卓 / H5 的環境下才能被看到！ 小程式不可能被看到！</view>
        <!--#endif-->
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        },
        onLoad() {
            //#ifdef MP-WEIXIN
            console.log("只有微信小程式才能看到我輸出這行");
            //#endif
            //#ifdef H5
            console.log("只有H5才能看到我輸出這行");
            //#endif
        }
    }
</script>

<style>

</style>

C3哪裡沒實踐，按照這 /**/ 照貓畫虎即可 很簡單啊！

本文來自部落格園，作者：鹹瑜，轉載請註明原文連結：https://www.cnblogs.com/bi-hu/p/15271902.html