vue3+ElementPlus使用 lang=“ts“报Unexpected token错误

文章目录

问题背景

在做vue3+ElementPlus项目时，复制粘贴ElementPlus官网的代码到项目中，结果会报这样的错：

ESLint Parsing error: Unexpected token

明明就是按照官网的代码原封不动的粘贴过来，为什么会报错呢？经过排查，原来是< script>标签中加了“lang = ts”，也就是使用了TypeScript语法糖。导致出现这个错误

问题解决

步骤一：下载typescript和ts-loader

npm install typescript ts-loader --save-dev

步骤二：配置vue.config.js文件，添加下面的代码

configureWebpack:{resolve:{extensions:[".ts",".tsx",".js",".json"]},module:{rules:[{test:/\.tsx?$/,loader:'ts-loader',exclude:/node_modules/,options:{appendTsSuffixTo:[/\.vue$/],}}]}}

添加好后，vue.config.js 内容如下：

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

步骤三：新建tsconfig.json文件放在项目根目录，并添加如下内容

{"compilerOptions":{"target":"es5","module":"commonjs","strict":true,"strictNullChecks":true,"esModuleInterop":true,"experimentalDecorators":true}}

步骤四：在src根目录下新建vue-shim.d.ts文件，并添加如下内容；( 这个文件可以让vue识别ts文件,不加会报错）

declare module "*.vue"{import Vue from"vue";exportdefault Vue;}

步骤五：重启项目，成功运行

本文主要参考如下文章：
https://blog.csdn.net/qq_61672548/article/details/125506231