广州极智

发布：2023-03-17 13:24
更新：2024-02-29 13:28
阅读：1175

【报Bug】vue3 nvue 设置默认 flex-direction 失效，vue2 可以

分类：uni-app

vue3 nvue manifest.json配置 bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 13.2.1

HBuilderX类型：正式

HBuilderX版本号： 3.7.3

手机系统： iOS

手机系统版本号： iOS 16

手机厂商：模拟器

手机机型： 14 pro max

页面类型： nvue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

  "name": "测试vue3项目",  
  "appid": "__UNI__185008D",  
  "description": "",  
  "versionName": "1.0.0",  
  "versionCode": "100",  
  "transformPx": false,  
  /* 5+App特有相关 */  
  "app-plus": {  
    "nvueCompiler": "uni-app",  
    "usingComponents": true,  
    "nvueStyleCompiler": "uni-app",  
    "compilerVersion": 3,  
    "splashscreen": {  
      "alwaysShowBeforeRender": true,  
      "waiting": true,  
      "autoclose": true,  
      "delay": 0  
    },  
    "nvue": { //可选，JSON对象，nvue页面相关配置  
      "flex-direction": "row" //可选，字符串类型，nvue页面的flex-direction默认值，可取值row、row-reverse、column、column-reverse  
    },  
    /* 模块配置 */  
    "modules": {},  
    /* 应用发布信息 */  
    "distribute": {  
      /* android打包配置 */  
      "android": {  
        "permissions": [  
          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",  
          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",  
          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",  
          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",  
          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",  
          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.CAMERA\"/>",  
          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",  
          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",  
          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",  
          "<uses-feature android:name=\"android.hardware.camera\"/>",  
          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"  
        ]  
      },  
      /* ios打包配置 */  
      "ios": {},  
      /* SDK配置 */  
      "sdkConfigs": {}  
    }  
  },  
  /* 快应用特有相关 */  
  "quickapp": {},  
  /* 小程序特有相关 */  
  "mp-weixin": {  
    "appid": "",  
    "setting": {  
      "urlCheck": false  
    },  
    "usingComponents": true  
  },  
  "mp-alipay": {  
    "usingComponents": true  
  },  
  "mp-baidu": {  
    "usingComponents": true  
  },  
  "mp-toutiao": {  
    "usingComponents": true  
  },  
  "uniStatistics": {  
    "enable": false  
  },  
  "vueVersion": "3"  
}

操作步骤：

根对象的 "vueVersion": 设置为 "3"； app-plus 底下的 nvue 对象设置为 "flex-direction": "row"；

  "name": "测试vue3项目",  
  "appid": "__UNI__185008D",  
  "description": "",  
  "versionName": "1.0.0",  
  "versionCode": "100",  
  "transformPx": false,  
  /* 5+App特有相关 */  
  "app-plus": {  
    "nvueCompiler": "uni-app",  
    "usingComponents": true,  
    "nvueStyleCompiler": "uni-app",  
    "compilerVersion": 3,  
    "splashscreen": {  
      "alwaysShowBeforeRender": true,  
      "waiting": true,  
      "autoclose": true,  
      "delay": 0  
    },  
    "nvue": { //可选，JSON对象，nvue页面相关配置  
      "flex-direction": "row" //可选，字符串类型，nvue页面的flex-direction默认值，可取值row、row-reverse、column、column-reverse  
    },  
    /* 模块配置 */  
    "modules": {},  
    /* 应用发布信息 */  
    "distribute": {  
      /* android打包配置 */  
      "android": {  
        "permissions": [  
          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",  
          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",  
          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",  
          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",  
          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",  
          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.CAMERA\"/>",  
          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",  
          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",  
          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",  
          "<uses-feature android:name=\"android.hardware.camera\"/>",  
          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"  
        ]  
      },  
      /* ios打包配置 */  
      "ios": {},  
      /* SDK配置 */  
      "sdkConfigs": {}  
    }  
  },  
  /* 快应用特有相关 */  
  "quickapp": {},  
  /* 小程序特有相关 */  
  "mp-weixin": {  
    "appid": "",  
    "setting": {  
      "urlCheck": false  
    },  
    "usingComponents": true  
  },  
  "mp-alipay": {  
    "usingComponents": true  
  },  
  "mp-baidu": {  
    "usingComponents": true  
  },  
  "mp-toutiao": {  
    "usingComponents": true  
  },  
  "uniStatistics": {  
    "enable": false  
  },  
  "vueVersion": "3"  
}

预期结果：

设置默认`"flex-direction": "row"` 生效

实际结果：

设置默认`"flex-direction": "row"` 不生效

bug描述：

vue3 项目，配置 "flex-direction": "row" 失效，还是默认的 column （从上到下排序）；在 vue2 项目正常

测试vue3项目.zip

2023-03-17 13:24 负责人:DCloud_UNI_WZF 分享

8 个回复

最佳回复

DCloud_UNI_WZF

HBuilderX 3.7.12 已修复

广州极智 (作者)

正式版还没发吧

2023-04-04 16:56
2***@qq.com

回复广州极智: 现在都还没发3.7.12，问题也解决不了，官方是在搞笑吗？

2023-05-20 15:17
顺利大魔王

回复 2***@qq.com: 您好有些问题想请教您望回复

2023-08-31 17:39
2***@qq.com

回复顺利大魔王: 3.8.3已经修复了呀

2023-09-06 16:15

DCloud_UNI_WZF

nvue3 复现该问题，感谢反馈，已加分

DCloud_UNI_WZF

临时解决方案：
替换 HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-cli-shared/dist/json/app/manifest/nvue.js 为附件文件

nvue.js_.zip

广州极智 (作者)

替换了之后，调用 uni.reLaunch 会报错，reLaunch:fail Cannot set property 'nvue' of null；

Cannot set property 'nvue' of null

TypeError: Cannot set property 'nvue' of null

at yu (uni-jsframework.js:32:226502)

at uni-jsframework.js:32:229490

at new Promise (<anonymous>)

at gI (uni-jsframework.js:32:229388)

at uni-jsframework.js:32:229298

at qu (uni-jsframework.js:32:218920)

at pI (uni-jsframework.js:32:229288)

at uni-jsframework.js:32:34294

at ai (uni-jsframework.js:32:32938)

at Object.reLaunch (uni-jsframework.js:32:33103)

2023-03-31 13:43
DCloud_UNI_WZF

回复广州极智: 附件我更新了，你再试下

2023-03-31 15:22
广州极智 (作者)

回复 DCloud_UNI_WZF: 好像可以了，谢谢

2023-03-31 18:05
广州极智 (作者)

回复 DCloud_UNI_WZF: 还是有问题，vue2 里，改了 flex-direction 是影响 nvue 页面的，vue 页面不会影响的，现在都影响到了，导致原来的 vue 页面样式全乱了

2023-04-03 09:21
DCloud_UNI_WZF

回复广州极智: 测试工程 HBuilderX 3.7.12 测试正常，如确认框架问题，提供测试工程，谢谢

2023-04-03 10:40
2***@qq.com

回复 DCloud_UNI_WZF: 运行到小程序还是报错

13:25:40.908 D:\xxxxxx\xxxxxx\uniapp\node_modules\@dcloudio\uni-cli-shared\dist\json\app\manifest\nvue.js:35

13:25:40.910 if (appPlusJson?.nvue?.['flex-direction'] &&

13:25:40.911 ^

13:25:40.913 SyntaxError: Unexpected token '.'

13:25:40.914 at wrapSafe (internal/modules/cjs/loader.js:915:16)

13:25:40.915 at Module._compile (internal/modules/cjs/loader.js:963:27)

13:25:40.915 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

13:25:40.917 at Module.load (internal/modules/cjs/loader.js:863:32)

13:25:40.918 at Function.Module._load (internal/modules/cjs/loader.js:708:14)

13:25:40.920 at Module.require (internal/modules/cjs/loader.js:887:19)

13:25:40.921 at require (internal/modules/cjs/helpers.js:74:18)

13:25:40.922 at Object. (D:\轩亚亿科\likeadmin_python-master\uniapp\node_modules\@dcloudio\uni-cli-shared\dist\mp\nvue.js:9:16)

13:25:40.923 at Module._compile (internal/modules/cjs/loader.js:999:30)

13:25:40.924 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

2024-02-29 13:29

广州极智 (作者)

vue3 项目，配置 "flex-direction": "row" 失效，还是默认的 column （从上到下排序）；在 vue2 项目正常

广州极智 (作者)

vue3 项目，配置 "flex-direction": "row" 失效，还是默认的 column （从上到下排序）；在 vue2 项目正常

广州极智 (作者)

vue3 项目，配置 "flex-direction": "row" 失效，还是默认的 column （从上到下排序）；在 vue2 项目正常

a***@gmail.com

3.8.4还是出错

顺利大魔王

麻烦问一下那你这里最后怎么解决的

2023-08-31 16:41
YUANRJ

回复顺利大魔王: 可以详细描述下问题

2024-02-29 14:58

2***@qq.com

运行vue3 还是报错

13:25:40.908 D:\xxxxxx\xxxxxx\uniapp\node_modules\@dcloudio\uni-cli-shared\dist\json\app\manifest\nvue.js:35
13:25:40.910 if (appPlusJson?.nvue?.['flex-direction'] &&
13:25:40.911 ^
13:25:40.913 SyntaxError: Unexpected token '.'
13:25:40.914 at wrapSafe (internal/modules/cjs/loader.js:915:16)
13:25:40.915 at Module._compile (internal/modules/cjs/loader.js:963:27)
13:25:40.915 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
13:25:40.917 at Module.load (internal/modules/cjs/loader.js:863:32)
13:25:40.918 at Function.Module._load (internal/modules/cjs/loader.js:708:14)
13:25:40.920 at Module.require (internal/modules/cjs/loader.js:887:19)
13:25:40.921 at require (internal/modules/cjs/helpers.js:74:18)
13:25:40.922 at Object.<anonymous> (D:\轩亚亿科\likeadmin_python-master\uniapp\node_modules\@dcloudio\uni-cli-shared\dist\mp\nvue.js:9:16)
13:25:40.923 at Module._compile (internal/modules/cjs/loader.js:999:30)
13:25:40.924 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

YUANRJ

升级HBuilderX版本试试

2024-02-29 14:58
2***@qq.com

回复 YUANRJ: 找到问题了本地node 版本太低了我换了个版本就好了

2024-03-01 10:17

要回复问题请先登录或注册

【报Bug】vue3 nvue 设置默认 flex-direction 失效，vue2 可以

预期结果：

设置默认`"flex-direction": "row"` 生效

实际结果：

设置默认`"flex-direction": "row"` 不生效

bug描述：

8 个回复

公告

相关问题

【报Bug】vue3 nvue 设置 默认 flex-direction 失效，vue2 可以

预期结果： 设置默认"flex-direction": "row" 生效

实际结果： 设置默认"flex-direction": "row" 不生效

bug描述：

与内容相关的链接

8 个回复

公告

相关问题

【报Bug】vue3 nvue 设置默认 flex-direction 失效，vue2 可以

预期结果：

设置默认`"flex-direction": "row"` 生效

实际结果：

设置默认`"flex-direction": "row"` 不生效