vue3+ElementPlus使用lang="ts"报Unexpected token错误的解决办法
更新时间：2023年01月18日 10:01:35 作者：今天上上签
最近开发中遇到了些问题,跟大家分享下,这篇文章主要给大家介绍了关于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";
export default Vue;
}
步骤五：重启项目，成功运行
本文主要参考如下文章：https://blog.csdn.net/qq_61672548/article/details/125506231
总结
到此这篇关于vue3+ElementPlus使用lang="ts"报Unexpected token错误解决的文章就介绍到这了,更多相关vue3 ElementPlus报Unexpected token内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了详解Vue 普通对象数据更新与 file 对象数据更新 ，具有一定的参考价值，有兴趣的可以了解一下。2017-04-04
路由懒加载是一种优化技术，用于延迟加载应用程序中的路由组件，它可以提高初始加载速度并减少资源消耗，特别适用于大型单页应用，下面我们就来看看它的原理与使用吧2023-08-08
这篇文章主要介绍了在vue里使用codemirror的两种用法,每种方法通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
今天在移动端项目中遇见一个需求,需要数据无限滚动,所以下面这篇文章主要给大家介绍了关于手写vue无限滚动指令的详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了vue3如何通过动态路由解决刷新页面空白或跳转404问题,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2025-01-01
Ant Design-vue 解决input前后空格问题(推荐)
最近做项目遇到这样一个问题输入框不允许有前后空格但字符中间可以有空格，怎么解决这个问题呢，接下来小编把ant Design-vue 解决input前后空格问题的实现代码分享给大家，感兴趣的朋友一起看看吧2022-10-10
本篇文章主要介绍了vue之页面缓存问题(基于2.0)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
在当前的互联网时代,前后端分离架构已经成为构建应用系统的主流方式,本文将详细介绍如何利用 SpringBoot 与 Vue3 构建一个前后端分离的项目,感兴趣的小伙伴可以了解下2025-04-04
这篇文章主要为大家详细介绍了bootstrap vue.js实现tab效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了vue3基于script setup语法$refs的使用，<BR> 在用vue3开发项目的时候，需要调用子组件的方法，于是想着用$refs来实现，但是我是使用script setup语法糖，原先vue2的语法已经不适用了。下面我们一起进入文章看详细内容吧</P><P>2021-12-12
最新评论