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