如何将 Vue .prototype 迁移到单独的文件

Posted 2023-02-23

【中文标题】如何将 Vue .prototype 迁移到单独的文件

【英文标题】：How to migrate Vue .prototype to a separate file

【发布时间】：2021-08-05 11:12:06

【问题描述】：

我有几个函数要放入 Vue .prototype 但我不想弄乱主要的.js 我试图移植这样的原型

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

//prototypes.js
import Vue from "vue";
export default new Vue.prototype(
    $appName = "myName",
);

但是使用这个我有一个错误 ` 错误 编译失败，出现 1 个错误 下午 6:35:11 ./src/vue-extensions/prototypes.js 中的错误

语法错误：D:\Projects\FrontEnd\gta\src\vue-extensions\prototypes.js: Unexpected token (3:19)

1 |从“vue”导入 Vue； 2 | export default new Vue.prototype(

3 | $appName = "我的名字",

@ ./src/main.js 14:0-37 @multi (webpack)-dev-server/client?http://192.168.3.200:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js`

【问题讨论】：

new Vue.prototype 真的没有意义，而且您不能在对象文字中进行赋值。如果您将它放在一个文件中，您能否发布有效的代码？

是的，例如这适用于 main.js — Vue.prototype.$assetsResolution = document.body.clientWidth * devicePixelRatio

那是完全不同的东西。你从哪里得到export default new Vue.prototype()？

另一种方法是在单独的 .js 中定义和导出您的函数（没有 Vue 或原型）。然后在 main.js 中导入这些函数，并在 main.js 中设置为 Vue.prototype。 import function1, function 2 from functions.jsVue.prototype.$function1 = function1等

【参考方案1】：

嗯，是语法错误 - 对象字面量内的赋值语句。

你不想实例化任何东西，所以不要使用new 。你不想导出任何可以在 main 中导入的东西，所以不要使用export default。只需将修改原型对象的代码放在模块中即可：

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

Vue.prototype.$appName = "myName";
Vue.prototype.$assetsResolution = document.body.clientWidth * devicePixelRatio <= 1920 && document.body.clientHeight * devicePixelRatio <= 1080 ? 1080: 2160

---

另一种方法可以更清楚地说明发生了什么（因为扩展您不拥有的原型对象通常是一种不好的做法），仍然是在 main.js 中进行分配，但在单独的模块中定义所有值：

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

Object.assign(Vue.prototype, prototypeExtensions);

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

export default 
    $appName: "myName",
    $assetsResolution: document.body.clientWidth * devicePixelRatio <= 1920 && document.body.clientHeight * devicePixelRatio <= 1080 ? 1080: 2160,
;