Vue3+Ant-design项目启用ts/typescript

最新推荐文章于 2024-08-31 17:10:42 发布

facing-screen

最新推荐文章于 2024-08-31 17:10:42 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_36110571/article/details/127362256

版权

JavaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

在Vue项目中引入Ant Design并尝试使用TypeScript时遇到编译错误。错误信息显示在模板解析阶段遇到不预期的token。解决方法并不需要修改配置文件，而是通过运行`vue add typescript`命令来启用Vue CLI的TypeScript支持。这将自动配置项目以正确处理TS文件。

摘要由CSDN通过智能技术生成

Ant-design官方文档提供了js和ts两种案例，按照文档给项目install ant-design后写了个组件编译时发现只要加上`<script lang="ts">`就会得到错误：

Module parse failed: Unexpected token (5:27)
File was processed with these loaders:
* ./node_modules/vue-loader/dist/templateLoader.js
* ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, null, -1 /* HOISTED */)
|
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| return (_openBlock(), _createElementBlock(_Fragment, null, [
| _createCommentVNode(" <HomeView /> "),

ERROR in ./src/views/InsetView.vue?vue&type=template&id=2c537f98&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/InsetView.vue?vue&type=template&id=2c537f98&ts=true) 5:27
Module parse failed: Unexpected token (5:27)

搜索了一圈很多说修改配置文件的，其实只需要通过如下命令安装@vue/cli-plugin-typescript即可启用ts支持。