快捷導(dǎo)航

vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決辦法

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

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

問(wèn)題背景

在做vue3+ElementPlus項(xiàng)目時(shí)，復(fù)制粘貼ElementPlus官網(wǎng)的代碼到項(xiàng)目中，結(jié)果會(huì)報(bào)這樣的錯(cuò)：

ESLint Parsing error: Unexpected token

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

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

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

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

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

步驟五：重啟項(xiàng)目，成功運(yùn)行

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

詳解Vue 普通對(duì)象數(shù)據(jù)更新與 file 對(duì)象數(shù)據(jù)更新
本篇文章主要介紹了詳解Vue 普通對(duì)象數(shù)據(jù)更新與 file 對(duì)象數(shù)據(jù)更新，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-04-04
深入詳解Vue中的路由懶加載
路由懶加載是一種優(yōu)化技術(shù)，用于延遲加載應(yīng)用程序中的路由組件，它可以提高初始加載速度并減少資源消耗，特別適用于大型單頁(yè)應(yīng)用，下面我們就來(lái)看看它的原理與使用吧
2023-08-08
vue使用codemirror的兩種用法
這篇文章主要介紹了在vue里使用codemirror的兩種用法,每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-08-08
手寫vue無(wú)限滾動(dòng)指令的詳細(xì)過(guò)程
今天在移動(dòng)端項(xiàng)目中遇見(jiàn)一個(gè)需求,需要數(shù)據(jù)無(wú)限滾動(dòng),所以下面這篇文章主要給大家介紹了關(guān)于手寫vue無(wú)限滾動(dòng)指令的詳細(xì)過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
vue3動(dòng)態(tài)路由解決刷新頁(yè)面空白或跳轉(zhuǎn)404問(wèn)題
這篇文章主要為大家詳細(xì)介紹了vue3如何通過(guò)動(dòng)態(tài)路由解決刷新頁(yè)面空白或跳轉(zhuǎn)404問(wèn)題,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2025-01-01
Ant?Design-vue?解決input前后空格問(wèn)題(推薦)
最近做項(xiàng)目遇到這樣一個(gè)問(wèn)題輸入框不允許有前后空格但字符中間可以有空格，怎么解決這個(gè)問(wèn)題呢，接下來(lái)小編把a(bǔ)nt?Design-vue?解決input前后空格問(wèn)題的實(shí)現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧
2022-10-10
詳解vue之頁(yè)面緩存問(wèn)題(基于2.0)
本篇文章主要介紹了vue之頁(yè)面緩存問(wèn)題(基于2.0)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
如何利用SpringBoot與Vue3構(gòu)建前后端分離項(xiàng)目
在當(dāng)前的互聯(lián)網(wǎng)時(shí)代,前后端分離架構(gòu)已經(jīng)成為構(gòu)建應(yīng)用系統(tǒng)的主流方式,本文將詳細(xì)介紹如何利用 SpringBoot 與 Vue3 構(gòu)建一個(gè)前后端分離的項(xiàng)目,感興趣的小伙伴可以了解下
2025-04-04
bootstrap vue.js實(shí)現(xiàn)tab效果
這篇文章主要為大家詳細(xì)介紹了bootstrap vue.js實(shí)現(xiàn)tab效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
vue3基于script?setup語(yǔ)法$refs的使用
這篇文章主要介紹了vue3基于script?setup語(yǔ)法$refs的使用，<BR>?在用vue3開(kāi)發(fā)項(xiàng)目的時(shí)候，需要調(diào)用子組件的方法，于是想著用$refs來(lái)實(shí)現(xiàn)，但是我是使用script?setup語(yǔ)法糖，原先vue2的語(yǔ)法已經(jīng)不適用了。下面我們一起進(jìn)入文章看詳細(xì)內(nèi)容吧</P><P>
2021-12-12