Question

我运行一个通过springboot应用程序的静态资源托管的VueJs应用程序。

到目前为止，我已经通过以下方式成功处理了外部配置。

我创建了静态externalConf.js，如果运行process.env.NODE_ENV === 'production'，我会在运行时读取

public/index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <script src="<%= BASE_URL %>js/externalizedConf.js"></script>
</head>

public/js/externalizedConf.js

config = {
    VUE_APP_FRONT_API_URL : "http://virwse03dev.devagipi.local:8094/api"
}

在一些读取配置的js文件中：

const frontApiUrl = process.env.NODE_ENV === 'production'?window.config.VUE_APP_FRONT_API_URL:process.env.VUE_APP_FRONT_API_URL

这工作正常，但是有没有更标准的方法将配置注入到打包的vuejs前端应用程序中？对我来说似乎有点骇人听闻。

Answer 1

我不知道这是否是您的情况，但是spring-cloud-config具有一个很好的功能。参见here。同样this类配置对您也有帮助。

编辑：

也许更简单的解决方案是这样：

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;
        }
    }

}

并在您的resources/static/js放置内容的文件externalizedConf.js中

config = {
    VUE_APP_FRONT_API_URL : [(${VUE_APP_FRONT_API_URL})]
}

和pom.xml用于依赖项

<?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/> <!-- lookup parent from repository -->
    </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>

    <properties>
        <java.version>1.8</java.version>
    </properties>

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

当您访问网址http://host:port/js/externalizedConf.js时，您应该获得带有已替换占位符的内容。当然，您可以使用spring的profiles为不同的环境/配置文件配置不同的属性值。

Answer 2

基于环境进行某些配置的一种正确方法是使用Webpack DefinePlugin为具有自己配置的不同环境构建捆绑软件。

在您的示例中，您具有以下Webpack配置：

{
   ...
   plugins: [
      new webpack.DefinePlugin({
         isProd: process.env.NODE_ENV === 'production',
      },
   ],
   ...
}

而您的public/js/externalizedConf.js就是：

export default {
   FRONT_API_URL: isProd ? 'https://production.api' : 'http://dev.api',
}

您可以了解有关Webpack DefinePlugin的更多信息。

此外，Vue CLI 3引入了define and use environment variables through the Vue app的新方法。

在静态托管的应用程序上外部化vuejs配置

2 个答案: