如何从vuejs访问application.properties中定义的变量

Question

我有一个springboot应用程序和两个文件(见下文(。我正试图从vuejs文件访问application.properties中定义的变量。

这是一个独特的问题，因为其他类似的问题使用不同的模板引擎(例如Thymelaf(，并且每个模板引擎的答案都是特定的。

应用程序属性

random_endpoint=http://localhost:8090/stuff

worker.js

...template stuff
<script>
export default {
data() {
return {
endpoint : "http://localhost:8080/default"
};
},
mounted () {
console.log("Random endpoint: ", random_endpoint); // How to access random endpoint??
}
}
</script>

我需要在worker.js中更改什么代码才能访问application.properties中定义的变量random_endpoint？

Answer 1

当您使用vue.js时，您使用的是客户端执行的框架(而Thymelaf是服务器端执行的框架(。也就是说，vue.js无法访问后端可用的信息，而无需进一步的操作。

由于worker.js中包含的代码是在客户端中执行的，因此基本上只有三种方法可以访问该属性：

1. 如果worker.js文件包含在Spring Boot项目中，则可以在构建过程中用application.properties中的值替换添加到worker.js中的占位符。然而，这可能不是预期目标，因为您只能在运行构建过程之前设置值。

2. 当您启动服务时，您将在后端创建一个资源，当vue.js应用程序自身运行时，它将加载该资源。然后，该资源包含带有键和值的属性，以便worker.js中包含的代码可以确定匹配键的值。

3. 您在后端提供了一个端点，以便worker.js中包含的代码可以在执行期间访问该端点并查询值。

只有您才能回答哪种解决方案适合您。