feat: improve template expression error message

close #6771

src/compiler/error-detector.js

@@ -89,10 +89,14 @@ function checkExpression (exp: string, text: string, errors: Array<string>) {
     if (keywordMatch) {
       errors.push(
         `avoid using JavaScript keyword as property name: ` +
-        `"${keywordMatch[0]}" in expression ${text.trim()}`
+        `"${keywordMatch[0]}"\n  Raw expression: ${text.trim()}`
       )
     } else {
-      errors.push(`invalid expression: ${text.trim()}`)
+      errors.push(
+        `invalid expression: ${e.message} in\n\n` +
+        `    ${exp}\n\n` +
+        `  Raw expression: ${text.trim()}\n`
+      )
     }
   }
 }

test/unit/features/options/template.spec.js

@@ -56,9 +56,9 @@ describe('Options template', () => {
       template: '<div v-if="!@"><span>{{ a"" }}</span><span>{{ do + 1 }}</span></div>'
     }).$mount()
     expect('Error compiling template').toHaveBeenWarned()
-    expect('invalid expression: v-if="!@"').toHaveBeenWarned()
-    expect('invalid expression: {{ a"" }}').toHaveBeenWarned()
-    expect('avoid using JavaScript keyword as property name: "do" in expression {{ do + 1 }}').toHaveBeenWarned()
+    expect('Raw expression: v-if="!@"').toHaveBeenWarned()
+    expect('Raw expression: {{ a"" }}').toHaveBeenWarned()
+    expect('avoid using JavaScript keyword as property name: "do"').toHaveBeenWarned()
   })
 
   it('should not warn $ prefixed keywords', () => {
@@ -75,7 +75,7 @@ describe('Options template', () => {
     expect('Error compiling template').toHaveBeenWarned()
     expect('invalid v-for alias "1"').toHaveBeenWarned()
     expect('invalid v-for iterator "2"').toHaveBeenWarned()
-    expect('invalid expression: v-for="(1, 2) in a----"').toHaveBeenWarned()
+    expect('Raw expression: v-for="(1, 2) in a----"').toHaveBeenWarned()
   })
 
   it('warn error in generated function (v-on)', () => {

test/unit/modules/compiler/compiler-options.spec.js

@@ -122,7 +122,7 @@ describe('compile options', () => {
 
     compiled = compile('<div v-if="a----">{{ b++++ }}</div>')
     expect(compiled.errors.length).toBe(2)
-    expect(compiled.errors[0]).toContain('invalid expression: v-if="a----"')
-    expect(compiled.errors[1]).toContain('invalid expression: {{ b++++ }}')
+    expect(compiled.errors[0]).toContain('Raw expression: v-if="a----"')
+    expect(compiled.errors[1]).toContain('Raw expression: {{ b++++ }}')
   })
 })