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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue3是Vue的第三个版本更快,更轻,易维护,更多的原生支持,下面这篇文章主要给大家介绍了关于vue3学习指导教程(附带获取屏幕可视区域宽高)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue前端如何向后端传递参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本文是小编给大家分享的vue实现仿淘宝结账页面实例代码，主要功能是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面，具体实例代码大家参考下本文2017-11-11
这篇文章主要介绍了vue制作抓娃娃机，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup添加name的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue中静态文件引用的注意事项及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
Vue的nextTick方法是用来在下次DOM更新周期中执行回调函数的方法，用于DOM操作后获取DOM更新后的状态，使用场景包括异步更新DOM、获取更新后元素的位置等情况，一般结合Vue的异步更新机制和watch监听器使用，实现方式可使用Promise、setTimeout等异步方法2023-04-04
这篇文章主要介绍了Vue中的父子组件通讯以及使用sync同步父子组件数据，对vue感兴趣的同学，可以参考下2021-04-04
这篇文章主要为大家详细介绍了vue实现伪3D切换滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了使用vue打包进行云服务器上传，本文给大家介绍的非常详细，对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
最新评论