当我的文件夹如下所示时，
my-app/
├─ package.json
├─ src/
│ ├─ index.html
│ ├─ main.js
│ ├─ style.scss
我可以将它设置为像下面这样构建吗？
my-app/
├─ package.json
├─ src/
│ ├─ index.html
│ ├─ main.js
│ ├─ style.scss
├─ dist/
│ ├─ assets/
│ │ ├─ main.js
│ │ ├─ style.scss
│ ├─ one/
│ │ ├─ index.html
│ ├─ two/
│ │ ├─ index.html
我可以在该文件夹中构建特定文本时进行不同的设置吗？
如下所示设置vite.config.js文件时，我能够确认资产文件也已在每个文件夹中创建。
export default defineConfig({
base: '',
root: './src',
build: {
outDir: '../build',
rollupOptions: {
input: 'src/index.html',
output: [
{
name: 'one',
dir: path.join(__dirname, 'build/one'),
},
{
name: 'two',
dir: path.join(__dirname, 'build/two'),
},
],
},
},
plugins: [ViteEjsPlugin()],
});
要在使用 Vite 时将输出构建到多个文件夹中，您可以在 vite.config.js 文件中使用
build.rollupOptions.output// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
output: [
{
dir: 'dist/folder1',
format: 'es',
chunkFileNames: '[name]-[hash].js',
entryFileNames: '[name]-[hash].js',
},
{
dir: 'dist/folder2',
format: 'es',
chunkFileNames: '[name]-[hash].js',
entryFileNames: '[name]-[hash].js',
},
],
},
},
});在此示例中，我们使用 rollupOptions.output 选项指定两个输出目录：dist/folder1 和 dist/folder2。每个目录将包含相应入口点的构建输出文件。
要更改每个文件夹的标题，您可以在 index.html 文件中使用动态导入语句从单独的文件加载标题。这是一个例子：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Loading...</title>
<script type="module">
import('./title.js').then((title) => {
document.title = title.default;
});
</script>
</head>
<body>
<!-- Your app content here -->
</body>
</html>在此示例中，我们使用动态导入语句从名为 title.js 的单独文件加载标题。您可以为每个输出目录创建一个单独的 title.js 文件，并为每个目录自定义标题。这是一个 title.js 文件示例：
// title.js
export default 'My App - Folder 1';在这个例子中，我们正在导出一个代表第一个文件夹标题的字符串。您可以为每个输出文件夹创建类似的文件并相应地自定义标题。