同一来源的多个应用程序的Vite

问题描述 投票：0回答：1

我是个新手，一开始我并不知道自己需要什么样的结构。

我需要构建多个应用程序，但其中一些依赖于相同的组件。

image

到目前为止效果很好，但我认为混合了一些东西

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/modules/modules\\VPlayerList\\index-74e8dd8e.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/main-a0df4ea4.js">
    <link rel="stylesheet" href="/assets/main.44382b18.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

Hrefs 错误，我错过了什么？

忘记附上vite配置：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path, { resolve } from 'path'
import glob from 'glob';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      input: Object.fromEntries(
        glob.sync("src/modules/**/*.html").map((file:string) => [
          path.relative(
            "src",
            file.slice(0, file.length - path.extname(file).length)
          ),
          fileURLToPath(new URL(file, import.meta.url)),
          
        ])
      ),
      output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/modules/[name]-[hash].js',
        dir: "dist"
      }
    },
  },
})
javascript html vite project-structure
1个回答
8
投票

我遇到了同样的问题，但无法添加评论，因此我将我的进度作为答案发布。

我需要为我的应用程序分发 3 个版本，这是一个使用 CapacitorJS 编译的移动（混合）应用程序、一个在线版本（具有一些隐藏功能、API 令牌等）和一个 Lite 版本（具有最少的功能）。

所有三个应用程序共享大部分系统组件，对我来说一次构建三个不同的版本可能非常容易。

我最接近的方法是使用 3 个入口点，即三个不同的 

index.html
文件。但是，我无法分离从构建生成的构建目录。到目前为止，这是我的 
vite.config.js
文件：

import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: "",
  build: {
    rollupOptions: {
      input: {
        web: resolve(__dirname, './index_web.html'),
        mobile: resolve(__dirname, './index_mobile.html'),
        lite: resolve(__dirname, './index_lite.html'),
      },
      output: [
        {
          name: "web",
          dir: "dist_web",
        },
        {
          name: "mobile",
          dir: "dist_mobile",
        },
        {
          name: "lite",
          dir: "dist_lite",
        }
      ]
    },
  },
});

如前所述，此方法仅构建三个 

dist
文件夹，其中包含三个应用程序。也许我缺少一种将输出链接到输入的方法，或者有一种使用不同构建命令的更简单的方法。

目前，我使用三个不同的 

vite.config.js
文件，并使用 
package.json
中声明的不同构建命令构建每个版本：

{
  "name": "vite-multiple-build",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build-web": "vite build --config vite.config.web.js",
    "build-mobile": "vite build --config vite.config.mobile.js",
    "build-lite": "vite build --config vite.config.lite.js",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "vite": "^3.2.3"
  }
}

这似乎工作正常，唯一的问题是入口点需要在构建后重命名。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.