我创建了一个插件,该插件应将一些数据发布到我的后端。我想设置一些后端url配置。我用“ console.log(...)”检查了插件中的URl,因为你可以在我的代码中看到它(在sendDataToBackEnd.js中)。但是我得到以下输出“ undefined”。这是错误:“错误消息:无法读取null的属性'backEndUrl'”
项目结构:
project1
public
backend-config.js
faviocon.ico
index.html
src
App.vue
main.js
config
backEndUrlConfig.js
plugin
sendDataToBackEnd.js
因此,我在“ public”文件夹中创建了backend-config.js
(function (window) {
window._backendconfig = {
urlBackend: `http://localhost:8090/api/auth/event`,
}
}(this));
我的config.js看起来像这样:
export default { ...window._backendconfig }
我的插件“ sendDataToBackEnd.js”看起来像这样:
import url from '../../config/backendURLconfig';
var backEndUrl = url.urlBackend;
console.log(backEndUrl)
const sendDatatoBackEnd = {}
sendDataToBackEnd.install = function (Vue){
{Method to send Data to my Backend}
}
export default sendDatatoBackEnd;
你正在将配置文件中的全局作用域JS(在窗口上设置属性)与文件中的模块样式JS sendDataToBackEnd.js
(从模块导入和导出)混合使用。
你需要从config导出某些内容(如果使用模块,则是最佳选择),或者只是从窗口访问它。
backendURLconfig.js
const config = {
urlBackend: `http://localhost:8090/api/auth/event`,
}
export default config
sendDataToBackEnd.js
import config from '../config/backendURLconfig';
var backEndUrl = config.urlBackend;
console.log(backEndUrl)
const sendDatatoBackEnd = {}
vuePlugin.install = function (Vue){
{Method to send Data to my Backend}
}
export default sendDatatoBackEnd;
谢谢你的榜样。我尝试了它,但是如果我声明`var backEndUrl =` localhost:8090 / api / auth / event``仍然可以得到相同的错误。我不明白,为什么我不能正确输出网址。您心中还有其他解决方案吗?
您到底做了什么改变?如果您仍在中设置该值
window
,backend-config.js
但从不导入该文件,则该代码将永远不会运行。尝试添加import "../../public/config/backend-config.js"
之前。export default { ...window._backendconfig }
但是,老实说,window
如果使用模块,最好不要完全设置它。模块的部分要点是避免污染全局范围。我只是更改了backendURLconfig.js。好吧,我会尝试的!
您认为最好的解决方案是什么?
最好的解决方案是简化。老实说,如果您不需要其他任何配置,只需在中定义它
sendDataToBackEnd.js
。但是,可以说这不是您想要的。好的,您仍然应该摆脱(function () { })()
在窗口上设置IIFE的位置。同样,除非您确实需要某些代码,否则您将无法控制不使用模块的代码。因此export default { ...window._backendconfig }
,您可以直接将您在其他文件中设置的配置导出,而不是直接从窗口访问它并重新导出。