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

Question

我有几个函数要放在 Vue .prototype 中 但我不想弄乱 main .js 我试过像这样移植原型(prototype)

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

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

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

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

1 |从“vue”导入 Vue； 2 |导出默认的新 Vue.prototype({

3 | $appName = "myName",

@./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`

Answer 1

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

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

//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

---

另一种方法可以更清楚地说明发生了什么(因为扩展您不拥有的原型(prototype)对象通常是一种不好的做法)，仍然是在 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,
};