vue.js - Vue 构建不包括我输出 .js 文件的函数

Question

在开发模式下工作正常，但在构建过程之后，vue 不包含 setupToken 函数(来自 @/api.js)到 app.js 输出文件。

// App.vue
//...
import { setupToken } from '@/api
export default {
  mounted () {
    this.setupToken() // TypeError: this.setupToken is not a function
  }
}

// @/api.js
import { mande } from 'mande'

export const postsAPI = mande(`${process.env.VUE_APP_ROOT_URL}/api/v1/posts`)

export const setupToken = ({ token }) => {
  postsAPI.options.headers.Authorization = 'Bearer ' + token
}

我猜是 webpack 配置的问题(我使用的是默认配置)，但不知道如何修复它。

Answer 1

setupToken 在您从 App.vue 导出的对象上不存在。

您正在从 @/api 导入 setupToken，因此您必须直接调用它，即 setupToken() 和 not 作为实例方法，即 this.setupToken()

WebPack 发现您没有使用从 @/api 导入的方法(因为您将其作为实例方法调用)，因此它 tree-shakes出来吧。

顺便说一句，尝试使用 TypeScript，它会让您知道该错误。