Vue.js中如何拆分全局函数到独立JS文件并导入使用

按以下步骤操作即可：

• 第一步：新建独立函数文件
  在你指定的folder/name.js路径创建JS文件，把原先写在index.js里的全局函数全部剪切到这个新文件中，写完业务逻辑后用ES模块语法导出即可。
  示例代码：

  // folder/name.js
  // 这里放你所有的全局函数，以下为示例
  export function formatDate(timestamp) {
    const d = new Date(timestamp)
    return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
  }
  
  export function validatePhone(phoneNum) {
    return /^1[3-9]\d{9}$/.test(phoneNum)
  }
  
  // 也可以把所有方法收拢到一个对象里默认导出，后续调用更方便
  export default {
    formatDate,
    validatePhone
  }
  

• 第二步：在原index.js中导入拆分后的文件
  回到你原先声明全局函数的index.js，按实际文件层级导入新文件的内容，保持你原来的全局注册逻辑完全不变即可。

  导入路径如果写相对路径容易出错，项目如果配置了@别名（通常指向src目录），直接用@/folder/name.js导入更稳妥。
  不同Vue版本的全局注册参考：
  Vue2 项目注册示例

  // index.js 或项目入口main.js
  import Vue from 'vue'
  // 导入拆分后的工具对象
  import utils from './folder/name.js'
  // 挂载到Vue原型，全局组件可直接通过this.$utils调用所有方法
  Vue.prototype.$utils = utils
  

  Vue3 项目注册示例

  // 项目入口main.js
  import { createApp } from 'vue'
  import App from './App.vue'
  import utils from './folder/name.js'
  
  const app = createApp(App)
  // 挂载全局属性
  app.config.globalProperties.$utils = utils
  app.mount('#app')
  

• 第三步：验证使用
  做了全局挂载的场景下，所有组件里的函数调用方式和拆分前完全一致，不需要修改已有业务代码。如果不需要全局挂载，只是部分业务场景用到这些函数，直接在对应文件里按需导入即可：

  // 业务组件/JS文件内按需导入
  import { formatDate } from '@/folder/name.js'
  console.log(formatDate(Date.now()))
  

注意点

• 导出和导入语法要对应：用export具名导出单个函数时，导入要加花括号写对应函数名；用export default导出对象时，导入可以自定义变量名，不需要加花括号。
• 拆分出去的函数如果依赖第三方包、项目内公共变量，要在name.js顶部单独导入对应依赖，不能直接复用原index.js里的上下文变量，会报未定义错误。

内容的提问来源于stack exchange，提问作者code-8