GitLab

场景

复现

1. 新建文件 bin/test.vue

<!--  -->
<template>
  <div>

  </div>
</template>

<script>
${demoDeclareCode}

export default {
  name: '',
};
</script>

<style lang="scss" type="text/scss" scoped>
</style>

2. 执行 npm run build
3. 报错：

问题查找路径：

• 一开始以为是 vue-cli 的解析规则是匹配 /\.vue$/ 的文件，但发现文件名改为 test.1vue 也会继续报错，但改成 text.vue1 就被忽略掉了，说明匹配规则是 /vue$/
• 但是在 vue-cli 的相关源码中搜索，并没有找到规则为 /vue$/ 的代码，同时修改 chainWebpack 的 vue 匹配规则也还是继续报错，排除掉这个选项 bin
• 同时也没有其他地方引用到这个文件夹
• 查看除了 vue.config.js 之外的配置文件是否有关系，看到 tsconfig.json 联想到报错的关键词 Declaration or statement expected.
• 该错误为 TypeScript错误:TS1128，说明和 TypeScript 有关
• 查看 ts 的配置文件 tsconfig.json，没有配置 include、exclude
• 进行相关修改后，报错消失

原因

tsconfig.json 中，如果不指定解析文件或排除文件，就会解析项目内的所有文件，包括 .vue（bin/create-component-document/template/doc.template.vue），导致 编译时报错

原配置 tsconfig.json

{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    "experimentalDecorators": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "esNext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

修改后的配置

tsconfig.json

{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    "experimentalDecorators": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "esNext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "paths": {
      "@/*": ["src/*"]
    }
  },
  // 如果不指定文件，就会解析项目内的所有文件，包括 .vue（src/template/doc.template.vue），导致 编译时报错
  "include": ["src", "types"],
  "exclude": [
    "./**/*.template.vue",
  ]
}