个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我是 vite 新手，首先，我实际上并不知道我需要什么样的结构。
我需要构建多个应用，但其中一些依赖于相同的组件。
到目前为止它运行良好，但我认为混合了一些东西
<!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"
}
},
},
})
最佳答案
我遇到了同样的问题，但无法添加评论，所以我发布了我的进度作为答案。
我需要为我的应用程序分发 3 个版本，这是一个使用 CapacitorJS 编译的移动(混合)应用程序、一个在线版本(具有一些隐藏功能、api token 等)和一个精简版(具有最少的功能)。
这三个应用程序共享大部分系统组件，我可以很容易地同时构建三个不同的版本。
我最接近的方法是使用 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"
}
}
这似乎工作正常，唯一的问题是入口点需要在构建后重命名。
关于javascript - vite 同源多个应用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74159670/
26
4
0
我将 Vite ( https://vitejs.dev/ ) 用于静态多页网站。 这是构建命令后的默认项目文件夹结构。 my-app/ ├─ node_modules/ ├─ dist/ │ ├─
Formatjs 提供了一个 babel plugin对于使用 react-intl 注入(inject)消息 ID 并删除 description 的模块。我如何将它与 Vite 一起使用？ 最佳答
我正在尝试编写一个 chrome 扩展程序。我找到了一种方法来创建多个页面和后台脚本，但后台脚本包含哈希并且是放入 dist/assets 文件夹中。我只想输出“dist/background.js”
我使用 vite 创建了一个项目模板。 在package.json下，我看到了这个； "scripts": { "dev": "vite", "build": "vue-tsc -
我正在尝试从 Create React App 迁移到 Vite.js，但我遇到了导入别名的问题。 在 Create React App 中，我有一个 jsconfig.json 文件，其中 comp
在我的 Vite 项目中使用以下 .env: # To prevent accidentally leaking env variables to the client, only # variabl
如果您尝试使用 Vite 将 dayjs 导入到 Vue/React 应用程序中，您会发现它失败。 Vite 仅适用于 ESM 模块。 最佳答案 我发现你需要直接导入esm模块，然后它才能在Vite
我最近试图在Vercel上部署一个SvelteKit项目库，但由于Vercel构建应用程序的方式，我编写的传递实用程序类并以编程方式调用TailWind的API端点无法工作。它在我的本地环境中运行得很
我最近试图在Vercel上部署一个SvelteKit项目库，但由于Vercel构建应用程序的方式，我编写的传递实用程序类并以编程方式调用TailWind的API端点无法工作。它在我的本地环境中运行得很
我正在使用 Vue 和 vite 通过获取 API 来练习 Web 应用程序的工作流程，遵循此 tutorial .末yarn dev命令，我收到错误。我试过了: 直接克隆project并运行相同的命
我有一个用 React JS 构建的网站，我使用 Vite 作为 JS Bundler。问题是，当我在 Netlify 上部署网站并重新加载页面时，它显示“找不到页面”。 我尝试添加更改 vite.c
我是 vite 新手，首先，我实际上并不知道我需要什么样的结构。 我需要构建多个应用，但其中一些依赖于相同的组件。 到目前为止它运行良好，但我认为混合了一些东西
我正在使用 Vue + Vite + TS，并且正在构建一些我想在其他地方构建和导入的库。 关键是我使用 dotenv 设置了一些环境变量，因此我可以使用 import.meta.env.MY_VAR
我正在参加「掘金·启航计划」 项目背景 vite出现之后，迅速带走了一大波webpack的使用者，即使是对打包工具不熟悉的小白，也能很快感受到两者的区别——vite快的多！
分析 version：2.3.7。本文将整理 vite 静态资源的几种处理方式，应用案例和源码分析相结合，带你 10mins 通关该模块知识~ 一.处理的五种方式 (1)
博客园 @四季留歌 项目工程下载（腾讯微云）：点我 缺点：必须安装 cesium 依赖和几个 vite 插件，起项目时略微麻烦，部署 cdn 较麻烦 优点：打包速度起飞，构建后的成果代码网络传输效率最
我有一个 vite 3 项目。我怎样才能将它更新到 vite 4？我需要从头开始创建一个新项目并复制文件吗？或者我只是更新 package.json 中的版本号，删除 node_modules 文件夹
我想通过 vite 获取 npm 模块中的原始 css 字符串。根据 vite 手册， https://vitejs.dev/guide/assets.html#importing-asset-as-
我正在尝试让 https 在我的 Vite 本地主机环境中工作。 Chrome 显示无效证书错误。 我已经像这样设置了我的 vite.config.js 文件: import { defineConf
您好，我已经安装了新的应用程序 vue3 typescript + vite，我在构建图像并旋转容器后遇到了问题。我无法访问 localhost:3000，浏览器只会显示 The connection
我是一名优秀的程序员,十分优秀！