Vue3+Vite，build配置的问题

cqwcns

Vue3+Vite，vite.config.js内容为：

[JavaScript] 纯文本查看 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { CRX_OUTDIR } from './viteBuildGlobalConfig'
export default defineConfig({
  base: './',
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        popup: resolve(__dirname, `src/popup/popup.html`)
      },
      output: {
        dir: 'dist',
        assetFileNames: '[name]/[name].[ext]',
        chunkFileNames: 'js/[name].js',
        entryFileNames: e => `${e.name}/[name].js`
      }
    }
  }})

build后，css和js的输出路径为dist/popup，但popup.html的输出路径为dist/src/pupup
我希望html的输出路径也是dist/popup，应该怎么写？

yushuai033X

assetFileNames: 'popup/[name].[ext]',
试一下

cqwcns

yushuai033X 发表于 2023-12-1 09:40
assetFileNames: 'popup/[name].[ext]',
试一下

测速过，assetFileNames配置只能改变css文件的输出路径，无法改变html的。

yushuai033X

那试一下插件

[JavaScript] 纯文本查看 复制代码

import { Plugin } from 'vite'

export function changeHtmlOutputPath(): Plugin {
  return {
    name: 'change-html-output-path',
    transformIndexHtml(html) {
      return html.replace('dist/', 'dist/popup/')
    }
  }
}

[Asm] 纯文本查看 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { CRX_OUTDIR } from './viteBuildGlobalConfig'
import { changeHtmlOutputPath } from './changeHtmlOutputPath'

export default defineConfig({
  base: './',
  plugins: [vue(), changeHtmlOutputPath()],
  build: {
    rollupOptions: {
      input: {
        popup: resolve(__dirname, `src/popup/popup.html`)
      },
      output: {
        dir: 'dist',
        assetFileNames: '[name]/[name].[ext]',
        chunkFileNames: 'js/[name].js',
        entryFileNames: e => `${e.name}/[name].js`
      }
    }
  }
})