vuepress不支持<script lang="tsx">,怎么能让它支持

[wocwin]

问题如图:

[CalmHarbin]

问题如图:

你的问题解决了吗

[CalmHarbin]

修改config.js文件，增加对tsx文件支持

{
    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$/]
                            }
                        }
                    ]
                }
            ]
        }
    },
}

[wocwin]

修改config.js文件，增加对tsx文件支持

{
    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$/]
                            }
                        }
                    ]
                }
            ]
        }
    },
}

是不是需要安装这三个依赖：babel-loader；cache-loader；ts-loader

[CalmHarbin]

是不是需要安装这三个依赖：babel-loader；cache-loader；ts-loader

babel-loader和cache-loader在vuepress已经有依赖了，如果你没有使用vuepress-plugin-typescript则需要安装ts-loader和typescript。ts-loader请安装8.x版本,因为vuepress内部使用的的webpack4.x

[wocwin]

是不是需要安装这三个依赖：babel-loader；cache-loader；ts-loader

babel-loader和cache-loader在vuepress已经有依赖了，如果你没有使用vuepress-plugin-typescript则需要安装ts-loader和typescript。ts-loader请安装8.x版本,因为vuepress内部使用的的webpack4.x

之前有安装这个插件（vuepress-plugin-typescript），但是里面都没有配置；我删除node_modules重新安装后tsx能跑起来，但console会报很多ts的错后来在tsconfig文件加了"suppressImplicitAnyIndexErrors": true,就解决了

最终项目是跑起来了，总之谢谢啦！

[tlyau62]

If you want to import a tsx file without extension,
you may also need this code in config.js

chainWebpack: (config) => {
    config.resolve.extensions.add(".tsx");
}

[tlyau62]

If anyone is mixing vue-cli and vuepress to create a project,
you may need this webpack config to make tsx works.

The babel config is based on the vue-cli defaults.

chainWebpack: (config) => {
    config.resolve.extensions.add(".tsx");

    config.module
      .rule("tsx")
      .test(/\.tsx$/)
      .use("cache-loader")
      .loader(require.resolve("cache-loader"))
      .end()
      .use("ts-loader")
      .loader(require.resolve("ts-loader"))
      .options({
        appendTsxSuffixTo: [/\.vue$/, /\.md$/],
        compilerOptions: {},
      })
      .end();
  },

[tlyau62]

I've finally written a plugin that support for both ts and tsx. Hope can help someone.