页面配置文件 page.config.ts 别名不生效

[GiantappMan]

相关平台

微信小程序

复现仓库

https://github.com/DaZiYuan/taro_issue.git
小程序基础库: 最新
使用框架: Vue 3

复现步骤

index.config.ts

import { config } from "@/config/data"; //报错
// import { config } from "../../config/data";  正常
export default definePageConfig({
  navigationBarTitleText: config.title,
});

期望结果

import { config } from "@/config/data";

实际结果

报错：Cannot find module '@/config/data'

环境信息

Taro v3.4.7


  Taro CLI 3.4.7 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
      npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD

[GiantappMan]

还有一个问题，在vue中直接定义 definePageConfig 也无法访问配置
#11704

[Chen-jj]

@DaZiYuan 配置文件用的 @babel/register 直接读取，没有走 webpack，所以是不支持别名的。

[GiantappMan]

在vue中直接定义 definePageConfig 也无法访问配置

那 在vue中直接定义 definePageConfig 也无法访问配置这个问题呢

不行

const page = "首页";
definePageConfig({
  navigationBarTitleText: page,
});

---

行

definePageConfig({
  navigationBarTitleText: "首页",
});

[AdvancedCat]

在vue中直接定义 definePageConfig 也无法访问配置

那 在vue中直接定义 definePageConfig 也无法访问配置这个问题呢

不行

const page = "首页";
definePageConfig({
  navigationBarTitleText: page,
});

行

definePageConfig({
  navigationBarTitleText: "首页",
});

因为Taro编译时会用 /definePageConfig\(\{[\w\W]+?\}\)/g 这种正则匹配的方式，把 () 内的数据抠出来， 所以此时它就是一个字符串，无法用变量形式来表达了。

[biluochun]

那怎么使用 process.env.TARO_ENV 来差异化配置。没办法嘛，文档写着用这个差异化。。。
https://taro-docs.jd.com/taro/docs/page-config/

[biluochun]

@Chen-jj 能否这么实现 用 /definePageConfig\(\{[\w\W]+?\}\)/g 这种正则匹配的方式，把 () 内的数据抠出来，允许配置 function;
比如:

definePageConfig((config: Config) => {
  if (process.env.TARO_ENV === 'h5') config.xxx = 1;
  return config;
});

用 eval 去执行匹配出来的字符创（函数）。实现一定程度上的动态配置。

[Chen-jj]

@biluochun 在 page.config.js 中使用环境变量进行判断应该是可以的。正则抓取只是针对页面内定义的 config

[biluochun]

@biluochun 在 page.config.js 中使用环境变量进行判断应该是可以的。正则抓取只是针对页面内定义的 config

page.config.js 是可以的，看到有 definePageConfig 就用了，

if (process.env.TARO_ENV === 'alipay') {
  definePageConfig({
    usingComponents: {
      'subscribe-msg': 'plugin://subscribeMsg/subscribe-msg',
    },
  });
} else {
  definePageConfig({
    navigationBarTitleText: '',
  });
}

// 或者这样
const pageConfig = {
  navigationBarTitleText: '',
};
if (process.env.TARO_ENV === 'alipay') {
  Object.assign(pageConfig, {
    usingComponents: {
      'subscribe-msg': 'plugin://subscribeMsg/subscribe-msg',
    },
  });
}
definePageConfig(pageConfig);

文档里声明无法使用变量，我以为是预编译过程无法使用运行时变量。没想到是这么一种hack的方式，不能使用任何变量。
最好给个报错，definePageConfig匹配到错误的正则时。我改了一堆文件，然后才发现这个问题。。。