PROSAGA码农传奇-组态/图模一体化-在静态托管的应用程序上外部化vuejs配置

<div class =“post-text”itemprop =“text”>
  
    我不知道这是不是你的情况，但是spring-cloud-config有一个不错的功能。看到
    <a href="https://cloud.spring.io/spring-cloud-config/multi/multi__serving_plain_text.html" rel="nofollow noreferrer">
      这里
    </A>
    。也
    <a href="https://cloud.spring.io/spring-cloud-config/multi/multi__embedding_the_config_server.html" rel="nofollow noreferrer">
      这个
    </A>
     配置应该对你有所帮助。
  
  
    的
      编辑：
    </强>
  
  
    也许更简单的解决方案是：
  
   <pre>
 <code>
 import org.springframework.beans.BeansException;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.thymeleaf.spring5.SpringTemplateEngine;
import org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring5.view.ThymeleafViewResolver;
import org.thymeleaf.templatemode.TemplateMode;
import org.thymeleaf.templateresolver.ITemplateResolver;

@SpringBootApplication
public class SpringTemplateApplication {

public static void main(String[] args) {
        SpringApplication.run(SpringTemplateApplication.class, args);
    }

@Configuration
    public class WebMvcConfiguration implements WebMvcConfigurer, ApplicationContextAware {

private ApplicationContext applicationContext;

@Override
        public void setApplicationContext(final ApplicationContext applicationContext) throws BeansException {
            this.applicationContext = applicationContext;
        }

@Bean
        public ViewResolver javascriptViewResolver() {
            ThymeleafViewResolver resolver = new ThymeleafViewResolver();
            resolver.setTemplateEngine(templateEngine());
            resolver.setContentType("application/javascript");
            resolver.setCharacterEncoding("UTF-8");
            resolver.setViewNames(new String[] {"*.js"});
            return resolver;
        }

@Bean
        public SpringTemplateEngine templateEngine() {
            SpringTemplateEngine engine = new SpringTemplateEngine();
            engine.addTemplateResolver(javascriptTemplateResolver());
            return engine;
        }

public ITemplateResolver javascriptTemplateResolver() {
            SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
            resolver.setApplicationContext(applicationContext);
            resolver.setOrder(1);
            resolver.setCheckExistence(true);
            resolver.setPrefix("classpath:/static/js/");
            resolver.setCacheable(false);
            resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
            return resolver;
        }
    }

@Controller
    public static class JavascriptController {

@Value("${VUE_APP_FRONT_API_URL:NOTDEFINED!!!}")
        private String vueApiUrl;

@GetMapping(value = "/js/{file}", produces = "text/javascript")
        public String getJavascript(@PathVariable("file") final String file, final Model model) {
            model.addAttribute("VUE_APP_FRONT_API_URL", vueApiUrl);
            return file;
        }
    }

}

</code>
 </pre>
  
    在你的
     <code>
 resources/static/js
 </code>
     把文件
     <code>
 externalizedConf.js
 </code>
     内容
  
   <pre>
 <code>
 config = {
 VUE_APP_FRONT_API_URL : [(${VUE_APP_FRONT_API_URL})]
}

</code>
 </pre>
  
    和
     <code>
 pom.xml
 </code>
     依赖
  
   <pre>
 <code>
 <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.1.2.RELEASE</version>
 <relativePath/> 
 </parent>
 <groupId>com.demo</groupId>
 <artifactId>spring-template</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <name>spring-template</name>
 <description>Demo project for Spring Boot</description>

<dependencies>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 </dependency>

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-test</artifactId>
 <scope>test</scope>
 </dependency>
 </dependencies>

<build>
 <plugins>
 <plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </plugin>
 </plugins>
 </build>

</project>

</code>
 </pre>
  
    当你访问网址时
     <code>
 http://host:port/js/externalizedConf.js
 </code>
     你应该获得替换占位符的内容。当然你可以使用spring
    <a href="https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-profiles.html" rel="nofollow noreferrer">
      型材
    </A>
     为不同的环境/配置文件配置不同的属性值。
  
</DIV>