如何让VuePress支持ts＜script lang=“ts“＞及支持tsx＜script lang=“tsx“＞

vuepress正常支持TypeScript可以参考这篇知乎，只是安装vuepress-plugin-typescript插件!

以上只是支持Ts语法如图1，不支持图2这种，页面会报图3的错误

如何解决图2这种格式

在项目中docs—.vuepress—config.js文件中添加以下这段代码

 configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    exclude: /node_modules/,
                    use: [
                        'cache-loader',
                        {
                            loader: 'babel-loader',
                            options: {
                                babelrc: false,
                                configFile: false,
                                presets: [
                                    '@babel/preset-env', // 可以识别es6语法
                                    '@vue/babel-preset-jsx' // 解析jsx语法
                                ]
                            }
                        },
                        {
                            loader: 'ts-loader',
                            options: {
                                appendTsxSuffixTo: [/\.vue$/, /\.md$/]
                            }
                        }
                    ]
                }
            ]
        }
    },

添加以上代码后的效果如下图

如果以上console还是有报ts类型错误，但是不影响项目运行，则在tsconfig.json文件中加上

"suppressImplicitAnyIndexErrors": true, // 解决console报ts错

相关文章

axios二次封装，接口统一存放,满足RESTful风格

---

keep-alive不能缓存多层级路由(vue-router)菜单问题解决

---

基于ElementUi再次封装基础组件文档