diff --git a/lib/plugin-webpack4.js b/lib/plugin-webpack4.js
index a56b5edce..ae6d02f42 100644
--- a/lib/plugin-webpack4.js
+++ b/lib/plugin-webpack4.js
@@ -31,7 +31,12 @@ class VueLoaderPlugin {
     // find the rule that applies to vue files
     let vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue`))
     if (vueRuleIndex < 0) {
-      vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`))
+      const vueHtmlRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`))
+      const htmlOnlyRuleIndex = rawRules.findIndex(createMatcher(`foo.html`))
+      // Only use the .vue.html rules if they don't also match normal .html files
+      if (vueHtmlRuleIndex !== -1 && htmlOnlyRuleIndex === -1) {
+        vueRuleIndex = vueHtmlRuleIndex
+      }
     }
     const vueRule = rules[vueRuleIndex]
 
diff --git a/lib/plugin-webpack5.js b/lib/plugin-webpack5.js
index 9b156ff12..dcf6b5514 100644
--- a/lib/plugin-webpack5.js
+++ b/lib/plugin-webpack5.js
@@ -60,9 +60,16 @@ class VueLoaderPlugin {
       })
 
       if (!vueRules.length) {
-        vueRules = ruleSet.exec({
+        const vueHtmlRules = ruleSet.exec({
           resource: 'foo.vue.html'
         })
+        const htmlOnlyRules = ruleSet.exec({
+          resource: 'foo.html'
+        })
+        // Only use the .vue.html rules if they don't also match normal .html files
+        if (vueHtmlRules.length > htmlOnlyRules.length) {
+          vueRules = vueHtmlRules
+        }
       }
       if (vueRules.length > 0) {
         if (rawRule.oneOf) {