diff --git a/packages/playground/lib/index.dist.html b/packages/playground/lib/index.dist.html
index 3416c1f3952fa9..eddf3006a66aec 100644
--- a/packages/playground/lib/index.dist.html
+++ b/packages/playground/lib/index.dist.html
@@ -1,15 +1,14 @@
 <!-- the production demo page, copied into dist/ -->
-
 <div class="es"></div>
 <div class="umd"></div>
 
 <script type="module">
-  import myLib from './my-lib.es.js'
+  import myLib from './my-lib-custom-filename.es.js'
 
   myLib('.es')
 </script>
 
-<script src="./my-lib.umd.js"></script>
+<script src="./my-lib-custom-filename.umd.js"></script>
 <script>
   MyLib('.umd')
 </script>
diff --git a/packages/playground/lib/vite.config.js b/packages/playground/lib/vite.config.js
index a80800f6ad3d58..2545d488e165ad 100644
--- a/packages/playground/lib/vite.config.js
+++ b/packages/playground/lib/vite.config.js
@@ -8,7 +8,8 @@ module.exports = {
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/main.js'),
-      name: 'MyLib'
+      name: 'MyLib',
+      fileName: (format) => `my-lib-custom-filename.${format}.js`
     }
   },
   plugins: [