uni-app在升级vue3后使用vite编译时，js部分不是写在xxx.vue中，而是通过src引入时，js代码中的条件编译无效

uni-app在升级vue3后使用vite编译时，js部分不是写在xxx.vue中，而是通过src引入时，js代码中的条件编译无效

信息项 信息内容
产品分类 uniapp/H5
PC开发环境 Mac
操作系统版本 macOS Big Sur 11.6
HBuilderX类型 正式
HBuilderX版本 3.3.5
浏览器平台 Chrome
浏览器版本 96.0.4664.110
项目创建方式 HBuilderX

示例代码：

index.vue代码

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  

<script src="./test.js"></script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

test.js代码

export default {  
    data() {  
        return {  
            title: 'Hello'  
        }  
    },  
    onLoad() {  
        // #ifdef APP-NVUE  
        console.log('This is APP-NVUE')  
        // #endif  
    },  
    methods: {  

    }  
}

操作步骤：

运行demo项目至浏览器，查看浏览器打印，显示了’This is APP-NVUE’的打印信息，说明条件编译失效。

预期结果：

运行demo项目至浏览器，查看浏览器打印，不应该显示’This is APP-NVUE’的打印信息。

实际结果：

运行demo项目至浏览器，查看浏览器打印，显示了’This is APP-NVUE’的打印信息，说明条件编译失效。

bug描述：

在升级vue3后使用vite编译时，js部分不是写在xxx.vue中，而是通过src引入时，js代码中的条件编译无效。


更多关于uni-app在升级vue3后使用vite编译时，js部分不是写在xxx.vue中，而是通过src引入时，js代码中的条件编译无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

已确认，下个版本修复

更多关于uni-app在升级vue3后使用vite编译时，js部分不是写在xxx.vue中，而是通过src引入时，js代码中的条件编译无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个BUG在3.6.4中依然存在

这个问题是由于Vite的构建机制导致的。在Vite项目中，通过<script src>引入的外部JS文件不会经过uni-app的条件编译预处理。

原因分析：

  1. Vite默认只处理.vue文件中的条件编译
  2. 外部JS文件在Vite构建流程中会被直接引入，不会经过uni-app的条件编译插件处理
  3. 这是Vite架构与Webpack架构的差异之一

解决方案：

方案一：将JS代码内联到Vue文件中（推荐）

<script>
export default {
    data() {
        return {
            title: 'Hello'
        }
    },
    onLoad() {
        // #ifdef APP-NVUE
        console.log('This is APP-NVUE')
        // #endif
    }
}
</script>

方案二：使用动态导入配合条件编译

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    data() {
        return {
            title: 'Hello'
        }
    },
    async onLoad() {
        // #ifdef APP-NVUE
        const nvueLogic = await import('./nvue-logic.js')
        nvueLogic.init()
        // #endif
        
        // #ifdef H5
        const h5Logic = await import('./h5-logic.js')
        h5Logic.init()
        // #endif
    }
})
</script>

方案三：使用环境变量替代条件编译

// test.js
export default {
    data() {
        return {
            title: 'Hello'
        }
    },
    onLoad() {
        if (process.env.UNI_PLATFORM === 'app-nvue') {
            console.log('This is APP-NVUE')
        }
    }
}

方案四：配置Vite插件处理外部JS文件 在vite.config.js中添加自定义处理：

import { defineConfig } from 'vite'
import uni from '[@dcloudio](/user/dcloudio)/vite-plugin-uni'

export default defineConfig({
    plugins: [
        uni({
            // 配置条件编译处理
            vueOptions: {
                compilerOptions: {
                    // 扩展需要处理的文件类型
                }
            }
        })
    ]
})
回到顶部