如何将Vue.prototype扩展迁移到独立文件避免main.js冗余

报错原因 #

• Vue.prototype不是构造函数，不能使用new关键字实例化
• 对象字面量内属性赋值需使用冒号:，你代码中使用等号=不符合JS语法规范，直接触发编译报错

正确实现方式 #

方案1：直接挂载（最简写法，适合无自定义配置需求场景） #

1. 改写prototypes.js

// prototypes.js
import Vue from "vue";

// 直接挂载属性
Vue.prototype.$appName = "myName";

// 挂载方法示例
Vue.prototype.$customRequest = function (params) {
  // 封装你的全局请求逻辑
  return fetch(params)
}

// 无需导出内容，执行文件即完成原型挂载

2. main.js引入

和你原有写法保持一致即可：

// main.js
import "./vue-extensions/prototypes";

方案2：Vue插件写法（更规范，支持自定义配置） #

1. 改写prototypes.js

// prototypes.js
export default {
  // Vue插件固定要求实现install方法
  install(Vue, customOptions = {}) {
    // 支持传入自定义配置覆盖默认值
    Vue.prototype.$appName = customOptions.appName || "myName";
    
    Vue.prototype.$customRequest = function (params) {
      return fetch(params)
    }
  }
}

2. main.js引入

// main.js
import prototypeExtensions from "./vue-extensions/prototypes";
// 通过use注册插件，支持传入自定义配置
Vue.use(prototypeExtensions, {
  appName: "你的项目自定义名称"
})

组件内使用验证 #

两种方案最终使用方式一致，在任意.vue组件中可以直接调用：

export default {
  mounted() {
    console.log(this.$appName) // 输出对应配置的项目名
    this.$customRequest({url: '/test'}) // 调用全局封装的请求方法
  }
}

注：如果是Vue3项目，不再支持Vue.prototype写法，改用app.config.globalProperties挂载全局属性方法，抽离逻辑和上述方案一致。

内容的提问来源于stack exchange，提问作者alexanne