vue3+ElementPlus使用lang="ts"报Unexpected t

目录 问题背景 问题解决 @L_ 304 _2@

问题背景

在做vue3+ElementPlus项目时，复制粘贴ElementPlus官网的代码到项目中，结果会报这样的错：

ESLint Parsing error: Une xp ected token

明明就是按照官网的代码原封不动的粘贴过来，为什么会报错呢？经过排查， 原来 是< script>标签中加了[lang = ts]，也就是使用了Ty PE Script语法糖。导致出现这个错误

问题解决

步骤一：下载typescript和ts-loader

npm install typescript ts-loader - -s ave-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 {  define Config } = require('@vue/cli-service')
module. export s = 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": {
      "t arg et": " ES5 ",
      "module": "commonjs",
      "strict": true,
      "strictNullChecks": true,
      " ESM odul ei nterop": 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/det ai ls/125506231

总结

到此这篇关于vue3+ElementPlus使用lang="ts"报Unexpected&nbs p; token错误解决的文章就介绍到这了,更多相关vue3 ElementPlus报Unexpected token内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: vue3应用elementPlus table并滚动显示问题 使用Vue3+ElementPlus前端实现分片上传的全过程 Vue3 + elementplus实现表单验证+上传图片+ 防止表单重复提交功能 vue3中的elementPlus全局组件中文转换方式 Vue3+ElementPlus 表单组件的封装实例 vue3 + elementPlus reset重置表单问题 Vue3中正确使用ElementPlus的示例代码

总结

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

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue3+ElementPlus使用lang="ts"报Unexpected t的详细内容...