diff --git a/button.html b/public/html/button.html
similarity index 100%
rename from button.html
rename to public/html/button.html
diff --git a/src/views/components/button/index.vue b/src/views/components/button/index.vue
index a05a43149..08c1f5647 100644
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -1,19 +1,27 @@
 <template>
-  <iframe src="./button.html" frameborder="0" class="iframe"></iframe>
+  <iframe
+    :src="url"
+    frameborder="0"
+    class="iframe"
+  ></iframe>
 </template>
 
 <script lang='ts'>
+import { ref } from 'vue';
 export default {
   setup() {
-    return {};
+    const url = ref(process.env.NODE_ENV === 'production' ? '/manages/html/button.html' : '/html/button.html');
+    return {
+      url
+    };
   },
 };
 </script>
 
 <style scoped>
 .iframe {
-  width:98%;
-  height:90vh;
+  width: 98%;
+  height: 90vh;
   border-radius: 6px;
 }
 </style>