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.@R_512_948@放在项目根目录，并添加如下内容

{
    "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应用elementPlus table并滚动显示问题
• 使用Vue3+ElementPlus前端实现分片上传的全过程
• Vue3 + elementplus实现表单验证+上传图片+ 防止表单重复提交功能
• vue3中的elementPlus全局组件中文转换方式
• Vue3+ElementPlus 表单组件的封装实例
• vue3 + elementPlus reset重置表单问题
• Vue3中正确使用ElementPlus的示例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！