How to add "origin" to each module in the development environment?

[bpuns]

My code：

• src/index.ts

import './module1/index'
import * as vue from 'vue'

The compiled content as seen by the browser:

• http://127.0.0.1:8001/src/index.ts

import "/src/module1/index.ts";
import *as vue from "/node_modules/.vite/deps/vue.js?v=ded64786";

I want these modules to add the origin of the development server when in the development mode.

import "http://127.0.0.1:8001/src/module1/index.ts";
import *as vue from "http://127.0.0.1:8001/node_modules/.vite/deps/vue.js?v=ded64786";

The purpose is to achieve a function similar to the combination of multiple projects.

What should I do to make my idea come true? I'm asking the experts in the community to teach me.

[ismaildasci]

This is for module federation / micro-frontends right? You want absolute URLs so other apps can import from your dev server.

Solution: Use the base config with full URL

// vite.config.js
export default defineConfig({
  base: 'http://127.0.0.1:8001/',
  server: {
    port: 8001,
    cors: true,  // Important for cross-origin imports
  }
})

For dev only, use conditional base:

export default defineConfig(({ mode }) => ({
  base: mode === 'development' 
    ? 'http://127.0.0.1:8001/' 
    : '/',
  server: {
    port: 8001,
    cors: true,
  }
}))

If you need module federation specifically:

Check out @originjs/vite-plugin-federation:

npm i @originjs/vite-plugin-federation

import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    federation({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Module1': './src/module1/index.ts',
      },
    })
  ]
})

This way other projects can import your modules dynamically at runtime.

Hope this helps! Let me know if you need more details on the federation setup.

[bpuns]

This is feasible for static resources, but I have another requirement is

import "http://127.0.0.1:8001/src/module1/index.ts";
import *as vue from "http://127.0.0.1:8001/node_modules/.vite/deps/vue.js?v=ded64786";

Therefore, at present, I have no choice but to use regular expressions to rewrite the compiled content.