如何使用Vite将入口点更改为默认的“src/main.js”之外的其他内容？

Question

我想指向不同的位置和文件名，偏离Vite标准。

假设我的

js

文件位于

out/frontend/../../out.js

中。当我将其重命名为

main.js

并将其复制到

index.html

和

vite.config.js

所在的项目的根目录中时，它就可以工作了。但我更愿意以某种方式改变入口点......

我试过这个：

rollupInputOptions: {
  // or whatever your entry file is
  input: resolve(__dirname, 'out/frontend/my/path/out.js')
}

没用。有什么建议吗？

Answer 1

从 Vite 2 开始，入口文件是在

<script>

中的

index.html

标签中指定的：

<script type="module" src="/src/main.js"></script>

您可以将该文件更改为您想要的文件：

<script type="module" src="/out/frontend/my/path/out.js"></script>

演示

Answer 2

使用

resolve

模块中的

path

并在

vite.config.js

配置中添加别名来解析路径，检查。

import { resolve } from 'path'

module.exports = {
  ...
  resolve: {
    alias: {
      '@': resolve(__dirname, '../out/'), // resolve path
    },
  },
  rollupInputOptions: {
    input: resolve(__dirname, '../out/entrypoint.js') // custom main
  }
}

• 要从解析路径导入模块，请使用

  '@'

  ，例如：

  import { myModule } from '@/mymodule'

• 您必须在

  index.html

  文件中调整新入口点的路径。

Answer 3

对于 Vit 5.1.11 这个配置对我有帮助

    import {defineConfig} from 'vite'
    import {resolve} from 'path';
    
    
    // https://vitejs.dev/config/
    export default defineConfig({
        root: resolve(__dirname, 'src'), // in this directory Vite will search entrypoint
        build: {
            outDir: resolve(__dirname, 'dist') // Without this option Vite will build app in derectory /src/dist
        }
    })