1

我在使用 vite 构建 html 文件时遇到问题。这可能是因为我使用了根目录中的所有资产，例如scriptsforsrc/scripts和scssfor src/scss。我正在使用 110 在/src/pages目录中生成 html。然后将这些 html 用作入口点。我有不同的布局和部分文件，这就是为什么我用/scripts和引用我的所有资产scss。但是，现在当 vite 构建 html 文件时。所有资产都像/assets/script在所有 html 文件中一样被引用。有人知道如何解决这个问题吗？预期结果是路径应该是../assets嵌套页面。

这是我的 vite.config.ts

    import * as glob from 'fast-glob';
    import { resolve, join } from 'path';
    import { defineConfig } from 'vite';
    import eslintPlugin from 'vite-plugin-eslint';
    import styleLint from '@amatlash/vite-plugin-stylelint';
    
    import * as tsconfig from './tsconfig.json';
    
    const paths = tsconfig.compilerOptions.paths;
    
    const defaultAlias = Object.keys(paths).reduce((acc, key) => {
      const value = paths[key][0];
      const path: string = key.replace('/*', '');
      acc.push({
        find: path,
        replacement: resolve(__dirname, value.replace('/*', '')),
      });
      return acc;
    }, [] as any[]);
    
    const files = glob.sync(resolve(__dirname, 'src') + '/**/*.html').reduce((acc: Record<string, string>, cur: string) => {
      let name = cur
        .replace(join(__dirname) + '/src/', '')
        .replace('/index.html', '')
        .replace('.html', '');
      // If name is blank, make up a name for it, like 'home'
      if (name === '') {
        name = 'home';
      }
    
      acc[name] = cur;
      return acc;
    }, {});
    
    console.clear();
    console.log(files);
    export default defineConfig({
      root: 'src',
      base: './',
      clearScreen: false, // This is to show Eleventy output in the console along with Vite output
      plugins: [
        styleLint(),
        eslintPlugin({
          fix: true,
          exclude: ['node_modules', '*.html', 'src/pages', 'src/index.html'],
        }),
      ],
      build: {
        rollupOptions: {
          input: files,
        },
        outDir: '../dist', // The output directory is relative to the project root, so we need to put it back one folder to work
      },
      resolve: {
        alias: [
          ...defaultAlias,
          {
            find: /~(.+)/,
            replacement: join(process.cwd(), 'node_modules/$1'),
          },
        ],
      },
    });
4

1 回答 1

1

要将输出目录更改为自定义输出目录，您必须调整output.dirinRollupOptions设置中的值vite.config.js：

  [...]

  build: {

    [...]

    rollupOptions: {
      output: {
        dir: 'myassets'   <--- change this value
      }
    }
  },

  [...]

更多信息：

于 2021-08-27T12:58:48.967 回答