基座应用和子应用都是vite+react #283

Macromer · 2022-02-18T08:43:33Z

Failed to resolve module specifier "/node_modules/vite/dist/client/env.mjs". Invalid relative url or base scheme isn't hierarchical
Uncaught TypeError: Failed to resolve module specifier "/@react-refresh". Invalid relative url or base scheme isn't hierarchical.
Uncaught TypeError: Failed to resolve module specifier "/node_modules/.vite/react.js?v=22bb5dc8". Invalid relative url or base scheme isn't hierarchical.

zhen-one · 2022-02-18T10:12:31Z

这个官网有写
https://cangdu.org/micro-app/docs.html#/zh-cn/framework/vite

按照文档改下基座应用就ok了

Macromer · 2022-02-21T02:59:33Z

我是这样改了还是会有这个问题

zhen-one · 2022-02-21T03:06:58Z

我是这样改了还是会有这个问题

看了下我的项目
子应用也需要编写插件补全资源地址

Macromer · 2022-02-21T03:44:56Z

我是这样改了还是会有这个问题

看了下我的项目子应用也需要编写插件补全资源地址

主要问题是子应用写了补全资源就成功了一次，这就很气。老兄有代码地址吗，我看看到底差在什么地方

zhen-one · 2022-02-21T03:52:39Z

我是这样改了还是会有这个问题

看了下我的项目子应用也需要编写插件补全资源地址

主要问题是子应用写了补全资源就成功了一次，这就很气。老兄有代码地址吗，我看看到底差在什么地方

没什么特殊的子应用就按照文档编写了一个vite插件

basepath就是服务所在的域名

	return {
		name: "vite:micro-app",
		apply: "build",
		configResolved(config) {
			// 获取资源地址前缀
			basePath = `${basePath}${config.base}${config.build.assetsDir}/`;
		},
		renderChunk(code, chunk) {
			// build后，import会通过相对地址引入模块，需要将其补全
			if (chunk.fileName.endsWith(".js") && /(from|import)(\s*['"])(\.\.?\/)/g.test(code)) {
				code = code.replace(/(from|import)(\s*['"])(\.\.?\/)/g, (all, $1, $2, $3) => {
					return all.replace($3, new URL($3, basePath).href);
				});
			}
			return code;
		},
	};

bailicangdu · 2022-02-21T06:13:46Z

基座有进行适配吗

Macromer · 2022-02-21T06:40:33Z

基座有进行适配吗

有的，现在还是报这个错 ===》

Macromer · 2022-02-21T06:50:09Z

我是这样改了还是会有这个问题

看了下我的项目子应用也需要编写插件补全资源地址

主要问题是子应用写了补全资源就成功了一次，这就很气。老兄有代码地址吗，我看看到底差在什么地方

没什么特殊的子应用就按照文档编写了一个vite插件

basepath就是服务所在的域名
	return {
		name: "vite:micro-app",
		apply: "build",
		configResolved(config) {
			// 获取资源地址前缀
			basePath = `${basePath}${config.base}${config.build.assetsDir}/`;
		},
		renderChunk(code, chunk) {
			// build后，import会通过相对地址引入模块，需要将其补全
			if (chunk.fileName.endsWith(".js") && /(from|import)(\s*['"])(\.\.?\/)/g.test(code)) {
				code = code.replace(/(from|import)(\s*['"])(\.\.?\/)/g, (all, $1, $2, $3) => {
					return all.replace($3, new URL($3, basePath).href);
				});
			}
			return code;
		},
	};

有完整项目的地址吗方便给一个吗

zhen-one · 2022-02-21T06:56:09Z

我是这样改了还是会有这个问题

看了下我的项目子应用也需要编写插件补全资源地址

主要问题是子应用写了补全资源就成功了一次，这就很气。老兄有代码地址吗，我看看到底差在什么地方

没什么特殊的子应用就按照文档编写了一个vite插件
basepath就是服务所在的域名
	return {
		name: "vite:micro-app",
		apply: "build",
		configResolved(config) {
			// 获取资源地址前缀
			basePath = `${basePath}${config.base}${config.build.assetsDir}/`;
		},
		renderChunk(code, chunk) {
			// build后，import会通过相对地址引入模块，需要将其补全
			if (chunk.fileName.endsWith(".js") && /(from|import)(\s*['"])(\.\.?\/)/g.test(code)) {
				code = code.replace(/(from|import)(\s*['"])(\.\.?\/)/g, (all, $1, $2, $3) => {
					return all.replace($3, new URL($3, basePath).href);
				});
			}
			return code;
		},
	};
有完整项目的地址吗方便给一个吗

完整的没办法给，你可以把你的代码开个repo，帮你看一下

bailicangdu · 2022-02-21T06:59:05Z

基座里microApp.start()那部分的代码贴一下看看

Macromer · 2022-02-21T07:15:16Z

基座里microApp.start()那部分的代码贴一下看看

bailicangdu · 2022-02-21T07:18:03Z

就是这里的问题了，这四处要改

bailicangdu · 2022-02-21T07:22:25Z

贴一下某个demo的配置，以供参考

Macromer · 2022-02-21T07:25:22Z

大佬帮看一下呢

bailicangdu · 2022-02-21T07:31:35Z

差不多，你启动看一下

Macromer · 2022-02-21T07:33:53Z

还是一样的问题

bailicangdu · 2022-02-21T07:35:41Z

<micro-app>元素代码和vite.config.js的代码发一下

Macromer · 2022-02-21T07:46:09Z

我把代码传上来了你看能访问到不

bailicangdu · 2022-02-21T07:55:42Z

Macromer · 2022-02-21T08:09:35Z

感谢大佬

Macromer · 2022-02-21T08:40:08Z

子应用里面图片访问不到呢

bailicangdu · 2022-02-21T10:04:18Z

子应用里面图片访问不到呢

文档里有写

Qujh97 · 2022-02-24T01:22:42Z

子应用用vite不太友好，个人实践后有很多小问题，建议还是webpack吧

jiangkaifree · 2022-05-24T09:58:33Z

成功了吗？我基座，子应用都是vite react

jiangkaifree · 2022-05-25T01:45:27Z

xdm 我的成功了突然之间开窍了。所以当你一下子解决不了，那不妨抽根烟，或者睡一觉试试。修改了一点文档。希望能能讲解的清楚一下。

下面是我的完整配置 (关键是 name 参数保持一致)：

基座应用配置

// 入口页面
<micro-app
  name="basename" // name(必传)：应用名称
  url="http://localhost:3001/basename/"
  inline // 使用内联script模式
  disableSandbox // 关闭沙箱
></micro-app>

// 入口 main.js
import microApp from '@micro-zoe/micro-app'

// microApp.start()
microApp.start({
  plugins: {
    modules: {
      // 注意这里 子应用的name值
      "basename": [{
        loader(code) {
          if (process.env.NODE_ENV === 'development') {
            // 这里 basename 需要和子应用vite.config.js中base的配置保持一致
            code = code.replace(/(from|import)(\s*['"])(\/basename\/)/g, all => {
              return all.replace('/basename/', 'http://localhost:3001/basename/')
            })
          }

          return code
        }
      }]
    }
  }
})

子应用除了要修改挂载的id外，还需要:

// vite.config.js
import { join } from 'path';
import { writeFileSync } from 'fs';

export default defineConfig({
  base: `${process.env.NODE_ENV === 'production' ? 'http://my-site.com' : ''}/basename/`,
  plugins: [

    (function () {
      let basePath = '';
      return {
        name: 'basename',
        apply: 'build',
        configResolved(config) {
          basePath = `${config.base}${config.build.assetsDir}/`;
        },
        writeBundle(options, bundle) {
          for (const chunkName in bundle) {
            if (Object.prototype.hasOwnProperty.call(bundle, chunkName)) {
              const chunk = bundle[chunkName];
              if (chunk.fileName && chunk.fileName.endsWith('.js')) {
                chunk.code = chunk.code.replace(
                  /(from|import\()(\s*['"])(\.\.?\/)/g,
                  (all, $1, $2, $3) => {
                    return all.replace($3, new URL($3, basePath));
                  },
                );
                const fullPath = join(options.dir, chunk.fileName);
                writeFileSync(fullPath, chunk.code);
              }
            }
          }
        },
      };
    })(),
  ],
})

wangyuan0108 · 2022-09-22T08:26:28Z

xdm 我的成功了突然之间开窍了。所以当你一下子解决不了，那不妨抽根烟，或者睡一觉试试。修改了一点文档。希望能能讲解的清楚一下。

下面是我的完整配置 (关键是 name 参数保持一致)：

基座应用配置

// 入口页面
<micro-app
  name="basename" // name(必传)：应用名称
  url="http://localhost:3001/basename/"
  inline // 使用内联script模式
  disableSandbox // 关闭沙箱
></micro-app>

// 入口 main.js
import microApp from '@micro-zoe/micro-app'

// microApp.start()
microApp.start({
  plugins: {
    modules: {
      // 注意这里 子应用的name值
      "basename": [{
        loader(code) {
          if (process.env.NODE_ENV === 'development') {
            // 这里 basename 需要和子应用vite.config.js中base的配置保持一致
            code = code.replace(/(from|import)(\s*['"])(\/basename\/)/g, all => {
              return all.replace('/basename/', 'http://localhost:3001/basename/')
            })
          }

          return code
        }
      }]
    }
  }
})

子应用除了要修改挂载的id外，还需要:

// vite.config.js
import { join } from 'path';
import { writeFileSync } from 'fs';

export default defineConfig({
  base: `${process.env.NODE_ENV === 'production' ? 'http://my-site.com' : ''}/basename/`,
  plugins: [

    (function () {
      let basePath = '';
      return {
        name: 'basename',
        apply: 'build',
        configResolved(config) {
          basePath = `${config.base}${config.build.assetsDir}/`;
        },
        writeBundle(options, bundle) {
          for (const chunkName in bundle) {
            if (Object.prototype.hasOwnProperty.call(bundle, chunkName)) {
              const chunk = bundle[chunkName];
              if (chunk.fileName && chunk.fileName.endsWith('.js')) {
                chunk.code = chunk.code.replace(
                  /(from|import\()(\s*['"])(\.\.?\/)/g,
                  (all, $1, $2, $3) => {
                    return all.replace($3, new URL($3, basePath));
                  },
                );
                const fullPath = join(options.dir, chunk.fileName);
                writeFileSync(fullPath, chunk.code);
              }
            }
          }
        },
      };
    })(),
  ],
})

按照这个接入也没有成功啊（react+webpack主 + vite+react子）

X-W-W · 2022-10-26T10:25:42Z

xdm 我的成功了突然之间开窍了。所以当你一下子解决不了，那不妨抽根烟，或者睡一觉试试。修改了一点文档。希望能能讲解的清楚一下。
下面是我的完整配置 (关键是 name 参数保持一致)：
基座应用配置

// 入口页面
<micro-app
  name="basename" // name(必传)：应用名称
  url="http://localhost:3001/basename/"
  inline // 使用内联script模式
  disableSandbox // 关闭沙箱
></micro-app>

// 入口 main.js
import microApp from '@micro-zoe/micro-app'

// microApp.start()
microApp.start({
  plugins: {
    modules: {
      // 注意这里 子应用的name值
      "basename": [{
        loader(code) {
          if (process.env.NODE_ENV === 'development') {
            // 这里 basename 需要和子应用vite.config.js中base的配置保持一致
            code = code.replace(/(from|import)(\s*['"])(\/basename\/)/g, all => {
              return all.replace('/basename/', 'http://localhost:3001/basename/')
            })
          }

          return code
        }
      }]
    }
  }
})

子应用除了要修改挂载的id外，还需要:

// vite.config.js
import { join } from 'path';
import { writeFileSync } from 'fs';

export default defineConfig({
  base: `${process.env.NODE_ENV === 'production' ? 'http://my-site.com' : ''}/basename/`,
  plugins: [

    (function () {
      let basePath = '';
      return {
        name: 'basename',
        apply: 'build',
        configResolved(config) {
          basePath = `${config.base}${config.build.assetsDir}/`;
        },
        writeBundle(options, bundle) {
          for (const chunkName in bundle) {
            if (Object.prototype.hasOwnProperty.call(bundle, chunkName)) {
              const chunk = bundle[chunkName];
              if (chunk.fileName && chunk.fileName.endsWith('.js')) {
                chunk.code = chunk.code.replace(
                  /(from|import\()(\s*['"])(\.\.?\/)/g,
                  (all, $1, $2, $3) => {
                    return all.replace($3, new URL($3, basePath));
                  },
                );
                const fullPath = join(options.dir, chunk.fileName);
                writeFileSync(fullPath, chunk.code);
              }
            }
          }
        },
      };
    })(),
  ],
})

按照这个接入也没有成功啊（react+webpack主 + vite+react子）

demo里面是部署在同一域名下
如果部署的不是同一域名下
修改，base: ${process.env.NODE_ENV === 'production' ? 'http://my-site.com' : ''}/
或者修改服务器设置，调整入口

justrustc · 2023-03-23T06:49:54Z

我用1.x的版本也遇到这个问题

levinx7512 · 2023-05-09T07:59:50Z

micro-app版本：1.0.0-beta.4
主应用 / 子应用：都是vite + react

按照1.x的文档 https://micro-zoe.com/docs/1.x/#/zh-cn/framework/vite ，使用iframe方式接入

控制台报错：
Uncaught TypeError: Failed to resolve module specifier "/@react-refresh".
Invalid relative url or base scheme isn't hierarchical.

@bailicangdu

helloworldwk · 2023-07-19T14:28:42Z

react子应用配置路由basename里，window.__MICRO_APP_BASE_ROUTE__为undefined，我打印了window，里面只有__MICRO_APP_BASE_APPLICATION__为true，有遇到过的吗？

helloworldwk · 2023-07-20T01:20:06Z

react子应用配置路由basename里，window.__MICRO_APP_BASE_ROUTE__为undefined，我打印了window，里面只有__MICRO_APP_BASE_APPLICATION__为true，有遇到过的吗？

MICRO_APP_ENVIRONMENT、MICRO_APP_NAME、__MICRO_APP_PUBLIC_PATH__这些环境变量window上都没有;__MICRO_APP_BASE_APPLICATION__判断是否为基座应用，竟然在主应用和子应用里都为true;我的主应用是vite+vue3，子应用是vite+react18

bailicangdu added the vite label Feb 21, 2022

jiangkaifree mentioned this issue May 25, 2022

docs: vite.md #406

Open

bailicangdu closed this as completed Oct 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

基座应用和子应用都是vite+react #283

基座应用和子应用都是vite+react #283

Macromer commented Feb 18, 2022

zhen-one commented Feb 18, 2022

Macromer commented Feb 21, 2022

zhen-one commented Feb 21, 2022 •

edited

Loading

Macromer commented Feb 21, 2022

zhen-one commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

Macromer commented Feb 21, 2022

zhen-one commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022 •

edited

Loading

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Qujh97 commented Feb 24, 2022

jiangkaifree commented May 24, 2022

jiangkaifree commented May 25, 2022 •

edited

Loading

wangyuan0108 commented Sep 22, 2022

X-W-W commented Oct 26, 2022

按照这个接入也没有成功啊（react+webpack主 + vite+react子）

justrustc commented Mar 23, 2023

levinx7512 commented May 9, 2023 •

edited

Loading

helloworldwk commented Jul 19, 2023

helloworldwk commented Jul 20, 2023

基座应用和子应用都是vite+react #283

基座应用和子应用都是vite+react #283

Comments

Macromer commented Feb 18, 2022

zhen-one commented Feb 18, 2022

Macromer commented Feb 21, 2022

zhen-one commented Feb 21, 2022 • edited Loading

Macromer commented Feb 21, 2022

zhen-one commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

Macromer commented Feb 21, 2022

zhen-one commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022 • edited Loading

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Macromer commented Feb 21, 2022

Macromer commented Feb 21, 2022

bailicangdu commented Feb 21, 2022

Qujh97 commented Feb 24, 2022

jiangkaifree commented May 24, 2022

jiangkaifree commented May 25, 2022 • edited Loading

wangyuan0108 commented Sep 22, 2022

按照这个接入也没有成功啊（react+webpack主 + vite+react子）

X-W-W commented Oct 26, 2022

按照这个接入也没有成功啊（react+webpack主 + vite+react子）

justrustc commented Mar 23, 2023

levinx7512 commented May 9, 2023 • edited Loading

helloworldwk commented Jul 19, 2023

helloworldwk commented Jul 20, 2023

zhen-one commented Feb 21, 2022 •

edited

Loading

bailicangdu commented Feb 21, 2022 •

edited

Loading

jiangkaifree commented May 25, 2022 •

edited

Loading

levinx7512 commented May 9, 2023 •

edited

Loading