[英]Vue.js 2 + Typescript - global variables becomes undefined after build
I have a Vue.js 2 project with Typescript.我有一个带有 Typescript 的 Vue.js 2 项目。 In the
main.ts
file, I've declared 2 variables, that I've wanted to access globally in my project:在
main.ts
文件中,我声明了 2 个变量,我想在我的项目中全局访问它们:
// ...
Vue.prototype.$http = http; // this is the library imported from another file, contains various methods such as `get`, `post` etc.
Vue.prototype.$urls = urls; // this is JSON object, also imported from another file
new Vue({
store,
render: (h) => h(App),
}).$mount('#app');
In one of my components, let's call it User
I have following mounted
code block:在我的一个组件中,我们称它为
User
我有以下已mounted
的代码块:
mounted(): void {
this.$http.get(`${this.$urls.getUser}/${this.userId}`);
}
Everything works fine when I'm running a local server (via npm run serve
command), but when I create an app build (via npm run build
command) and enter the app on the server (or the index.html
file on my hdd) I receive following error:当我运行本地服务器(通过
npm run serve
命令)时一切正常,但是当我创建应用程序构建(通过npm run build
命令)并在服务器上输入应用程序(或index.html
上的文件时) ) 我收到以下错误:
TypeError: Cannot read property 'get' of undefined
at VueComponent.value (user.ts:62) // <-- this line is the one with $http.get from `mounted` hook
I'm not sure how to proceed with this, I've blindly tried to add those global values to various places eg in http.d.ts
file I have the following:我不确定如何进行此操作,我盲目地尝试将这些全局值添加到各个位置,例如在
http.d.ts
文件中我有以下内容:
import { KeyableInterface } from '@/interfaces/HelperInterfaces';
import Vue from 'vue';
declare module 'vue/types/vue' {
interface VueConstructor {
$http: KeyableInterface;
}
}
declare module 'vue/types/vue' {
interface Vue {
$http: KeyableInterface;
}
}
declare module 'vue/types/options' {
interface ComponentOptions<V extends Vue> {
http?: KeyableInterface
}
}
(I've also created urls.d.ts
with similar code) (我也用类似的代码创建了
urls.d.ts
)
UPDATE #1:更新#1:
I've tried also following approach - in my main.ts
file:我也尝试过以下方法 - 在我的
main.ts
文件中:
const helperModules = {
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
install: (vueInstance: any) => {
vueInstance.prototype.$http = http;
vueInstance.prototype.$urls = urls;
},
};
Vue.use(helperModules);
But it still doesn't work (same error).但它仍然不起作用(同样的错误)。
UPDATE #2:更新#2:
I've also imported http
utility into my user
component, and added following console.log
to existing mounted
callback:我还将
http
实用程序导入到我的user
组件中,并将以下console.log
添加到现有的mounted
回调中:
console.log(http, this.$http)
And while working on my localhost
, it returns me twice the same value, but when I create a build it returns me:在我的
localhost
上工作时,它返回两倍相同的值,但是当我创建一个构建时它返回我:
Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}, undefined
Similar thing happens, when I add console.log(urls, this.$urls)
- imported module is being logged, while prototyped one returns undefined
.类似的事情发生,当我添加
console.log(urls, this.$urls)
- 导入的模块被记录,而原型返回undefined
。
Any thoughts?有什么想法吗? Will appreciate any help.
将不胜感激任何帮助。
Finally I've overcome the problem by moving the prototyping parts from main.ts
to App.ts
file.最后,我通过将原型部件从
main.ts
移动到App.ts
文件来克服了这个问题。
I'm not 100% sure if it's a valid "the Vue.js way" of solving this, as I've always declared that in main.js
file - but I was using then JavaScript & it was "just working" as expected.我不能 100% 确定它是否是解决此问题的有效“Vue.js 方式”,因为我一直在
main.js
文件中声明这一点 - 但我当时使用的是 JavaScript 并且它按预期“正常工作”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.