npm install -D typescript ts-loader

// webpack.config.js
module.exports = {
  resolve: {
    // 将 `.ts` 添加为一个可解析的扩展名。
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      // ... 忽略其它规则
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      }
    ]
  },
  // ...plugin omitted
}


如果是vue.config.js文件
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  lintOnSave: false, // 关闭烦人的eslint，如需打开请修改为true
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("_c", resolve("src/components"));
  },
  configureWebpack:{//vue cli创建的项目
    resolve: {
      // 将 `.ts` 添加为一个可解析的扩展名。
      extensions: ['.ts', '.js']
    },
    module: {
      rules: [     
       {
         test: /\.ts$/,
         loader: 'ts-loader',
         options: { appendTsSuffixTo: [/\.vue$/] }
       }
      ]
    }
  },
  // 打包时不生成.map文件
  productionSourceMap: true,
  // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  devServer: {
    // proxy: 'localhost:3000'
    disableHostCheck: true,
    port: 8081
  }
};

添加tsconfig.json文件

{
    "compilerOptions": {
      "sourceMap": true
    }
  }