vue3+ElementPlus使用lang="ts"报Unexpected token错误的解决办法

发布时间:2023-03-25 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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&nbsp;token错误解决的文章就介绍到这了,更多相关vue3 ElementPlus报Unexpected token内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的vue3+ElementPlus使用lang="ts"报Unexpected token错误的解决办法全部内容,希望文章能够帮你解决vue3+ElementPlus使用lang="ts"报Unexpected token错误的解决办法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。