Vue3直接引用element-plus報錯

錯誤如下：

 原因在于element-plus中的script使用的是ts文法：

解決方案：

下載下傳如下元件：

npm install -D vue-loader vue-template-compiler
           

npm install --save-dev typescript
           

npm install --save-dev ts-loader
           

配置vue.config.js檔案：

 配置内容如下：

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true})
module.exports = {configureWebpack: {resolve: {extensions: [".ts", ".tsx", ".js", ".json"], alias: {}},
        module: {
            rules: [{
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {appendTsSuffixTo: [/\.vue$/],}
            }]
        }
    }
}
           

在根目錄下建立tsconfig.json檔案：

 内容如下：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": [
      "dom",
      "es2016"
    ],
    "target": "es5"
  },
  "include": [
    "./src/**/*"
  ]
}
           

最後一步，在src下面随意建立一個空白ts檔案，如test.js。

重新啟動服務即可。