1.本地模拟服务器环境打开
http-server或者live-server ,这里我用的是：

npm install live-server -g

安装好后，在打包默认的路径dist下进行访问，输入命令 live-server 浏览器会新打开一个页面，即是最终打包后要预览的页面
2.打包配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
  publicPath: './',
  base: '/',
  plugins: [vue(),
  AutoImport({
    resolvers: [ElementPlusResolver()],
  }),
  Components({
    resolvers: [ElementPlusResolver()],
  }),
  ],
  build: {
    target: 'esnext', // 设置构建目标环境，可以是'es2015'等
    outDir: 'dist', // 构建时输出目录
    assetsDir: 'assets', // 放置生成的静态资源的目录
    minify: 'terser', // 构建时是否进行代码压缩
    // terserOptions: { // 传递给Terser的更多选项
    //   compress: {
    //     drop_console: true, // 是否删除所有的`console`语句
    //   },
    // },
    rollupOptions: { // 自定义Rollup的选项
      output: {
        entryFileNames: 'js/[name].js',//入口文件
        // entryFileNames: 'js/[name]-[hash].js',//入口文件
        chunkFileNames: 'js/[name].js',//分包引入文件
        // chunkFileNames: 'js/[name]-[hash].js',//分包引入文件
        // assetFileNames: '[ext]/[name]-[hash].[ext]',//静态文件
        assetFileNames(assetInfo){
          console.log(assetInfo)
          //文件名称
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name].css'
            // return 'css/[name]-[hash].css'
          }
          //图片名称
          //定义图片后缀
          const imgExts = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg','.ico']
          if(imgExts.some(ext => assetInfo.name.endsWith(ext))){
            return 'imgs/[name].[ext]'
            // return 'imgs/[name]-[hash].[ext]'
          }
          //剩余资源文件
          return 'assets/[name].[ext]'
          // return 'assets/[name]-[hash].[ext]'
        }
      },
    },
  },
})

image.png