快捷導(dǎo)航

vue3+ElementPlus使用lang="ts"報Unexpected?token錯誤的解決辦法

更新時間：2023年01月18日 10:01:35 作者：今天上上簽

最近開發(fā)中遇到了些問題,跟大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+ElementPlus使用lang="ts"報Unexpected?token錯誤的解決辦法,需要的朋友可以參考下

問題背景

在做vue3+ElementPlus項目時，復(fù)制粘貼ElementPlus官網(wǎng)的代碼到項目中，結(jié)果會報這樣的錯：

ESLint Parsing error: Unexpected token

明明就是按照官網(wǎng)的代碼原封不動的粘貼過來，為什么會報錯呢？經(jīng)過排查，原來是< script>標(biāo)簽中加了“lang = ts”，也就是使用了TypeScript語法糖。導(dǎo)致出現(xiàn)這個錯誤

問題解決

步驟一：下載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 內(nèi)容如下：

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文件放在項目根目錄，并添加如下內(nèi)容

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "strict": true,
      "strictNullChecks": true,
      "esModuleInterop": true,
      "experimentalDecorators": true
    }
}

步驟四：在src根目錄下新建vue-shim.d.ts文件，并添加如下內(nèi)容；( 這個文件可以讓vue識別ts文件,不加會報錯）

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

步驟五：重啟項目，成功運行

本文主要參考如下文章：https://blog.csdn.net/qq_61672548/article/details/125506231

總結(jié)

到此這篇關(guān)于vue3+ElementPlus使用lang="ts"報Unexpected token錯誤解決的文章就介紹到這了,更多相關(guān)vue3 ElementPlus報Unexpected token內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: