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 token错误解决的文章就介绍到这了,更多相关vue3 ElementPlus报Unexpected token内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: