Вывести конфигурацию vuejs на статически размещаемое приложение - PullRequest
0 голосов
/ 09 января 2019

Я запускаю приложение VueJs, размещенное через статические ресурсы приложения Springboot.

До сих пор я успешно справлялся с внешней конфигурацией следующим образом.

Я создаю статический 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? Мне это кажется немного хаком.

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Правильный способ иметь некоторые конфигурации, основанные на среде, - это создавать пакеты для разных сред, которые имеют свои собственные конфигурации, используя 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 представлен новый способ определения и использования переменных среды через приложение Vue .

0 голосов
/ 14 января 2019

Не знаю, так ли это, но у Spring-cloud-config есть хорошая функция для этого. Смотрите здесь . Также этот вид конфигурации должен быть полезен для вас.

редактирование:

Возможно, более простое решение будет таким:

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>

при доступе к URL http://host:port/js/externalizedConf.js вы должны получать контент с замененным заполнителем. И, конечно, вы можете использовать профили Spring для настройки различных значений свойств для разных сред / профилей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...