首页IT科技vue.use报错（vue3+ElementPlus使用 lang=“ts“报Unexpected token错误）

vue.use报错（vue3+ElementPlus使用 lang=“ts“报Unexpected token错误）

时间2025-09-19 12:05:03分类IT科技浏览6920
导读：问题背景 在做vue3+ElementPlus项目时，复制粘贴ElementPlus官网的代码到项目中，结果会报这样的错：...

问题背景

在做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"; export default Vue; }

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

本文主要参考如下文章：

https://blog.csdn.net/qq_61672548/article/details/125506231
声明：本站所有文章                           ，如无特殊说明或标注                           ，均为本站原创发布                           。任何个人或组织，在未征得本站同意时                  ，禁止复制                  、盗用                           、采集         、发布本站内容到任何网站         、书籍等各类媒体平台         。如若本站内容侵犯了原著者的合法权益                           ，可联系我们进行处理         。

创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！

展开全文READ MORE
awk统计出现次数（使用awk批量杀进程的命令）
↑