vue3+ts+webpack5+element-plus 踩坑

vue单文件组件中使用ts语法报错

检查：

1. 项目根目录下有配置tsconfig.json

"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.vue"],

2. webpack配置如下

{
    test: /\.vue$/,
    use: 'vue-loader',
},
{
    test: /\.(t|j)s$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
    },
},
...
new VueLoaderPlugin(),

3. src目录下有建shims-vue.d.ts
4. 根目录下的babel.config.js

module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    [
      "@babel/preset-typescript",
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ],
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread",
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

在网上找了很久没找到，试着注释一些代码也不行。后面终于在网上找到了同样的报错！

segmentfault.com/q/101000004…

解决： babel配置中的@babel/preset-typescript应该加上选项："allExtensions": true

原理：.vue文件需要通过vue-loader中转到babel,但是默认的babel配置不会处理.vue文件，所以要有上面的配置

问题

1. vue文件写两个script标签(由于用了keep-alive，要写组件名)

<script lang="ts">
export default {
  name: 'MaterialAdd',
};
</script>

<script lang="ts" setup>
...
</script>

保存时自动合并了。export default...移入setup内。且报eslint错误。

如何不合并？？？

eslint的rules增加： 'import/first': 'off',

在vscode外编辑，避免自动合并。会报eslint错误： “Import in body of module; reorder to top.eslintimport/first”

于是替换下顺序：

<script lang="ts" setup>
...
</script>

<script lang="ts">
export default {
  name: 'MaterialAdd',
};
</script>

代码提交时报eslint错误： TypeError: Cannot read property 'references' of null