# Vue-typescript Long类型失去精度 {#vue-typescript-long类型失去精度}

Vue typescript项目Long类型数据失去精度如何解决

# 一、后台解决方案 {#一、后台解决方案}

将 Long 类型转换成 String 类型然后传给前端

Springboot 代码示例

代码示例：

import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;

@JsonSerialize(using = ToStringSerializer.class)

# 二、前端解决方案 {#二、前端解决方案}

通过 json-bigint 进行将 Long 类型转换成 String

# 1. 添加依赖 "json-bigint": "^1.0.0" ,此处我使用的是 1.0.0 版本 {#_1-添加依赖-json-bigint-1-0-0-此处我使用的是-1-0-0-版本}

• yarn 安装

  yarn add json-bigint

• npm 安装

  npm i json-bigint

# 2. 编写json-bigint.d.ts 文件，放入项目中 scr/typings 目录下 {#_2-编写json-bigint-d-ts-文件，放入项目中-scr-typings-目录下}

此步骤是为了让 ts 可以使用 js 插件，不是使用 ts，开发的可以略过

declare module 'json-bigint'

# 3. 在你需要转换的地方使用 json-bigint {#_3-在你需要转换的地方使用-json-bigint}

此处我是在 axios 中，从后台获取值转换为json前，先使用 json-bigint

• 在文件中引入 json-bigint

  import JSONBig from 'json-bigint'

• 修改 axios 中的 transformResponse

  this.axios.defaults.transformResponse = [(data: any) => { // 此处是使用json-bigint进行json格式化 return JSONBig.parse(data) }]

• 为方便理解，附上封装的 axios 部分代码

  import axios from 'axios'

  class LocalAxios { public axios: any; constructor(url: string) { // 创建axios实例 this.axios = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 100000, withCredentials: true }) this.transResponse() } private transResponse() { // 将数据格式化成json this.axios.defaults.transformResponse = [(data: any) => { return JSONBig.parse(data) }] } }

<#>