Невозможно получить доступ к vue. js интерфейсу при запуске npm build (frontend-maven-plugin и подпружиненный загрузчик)

Question

Вдохновленный:

https://github.com/jonashackt/spring-boot-vuejs

Я создаю vue. js внешний интерфейс и подпружиненный бэкэнд с использованием frontend-maven-plugin . Мой проект имеет следующую структуру:

webapp
 -> webapp-backend
 -> webapp-frontend

Во время разработки npm run serve работает нормально, и я могу получить доступ к своему веб-интерфейсу по адресу:

Но когда я собираю приложение (используя плагин frontend-maven) и запускаю его с:

mvn clean install
java -jar webapp-backend/target/webapp-backend-1.0.0-SNAPSHOT.jar

, я просто получаю пустую страницу:

Даже при отсутствии ошибок из журналов java.

Есть ли какая-то дополнительная конфигурация, которую я должен применить, например, к бэкенду с пружинной загрузкой, чтобы он правильно перенаправлялся на мой интерфейс во время производственной сборки?

Ниже приведены некоторые дополнительные сведения:

webapp / webapp-backend / src / main / java / hello / GreetingController. java

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class GreetingController {


  @RequestMapping(value = "/**/{[path:[^\\.]*}")
  public String redirect() {
    // Forward to home page so that route is preserved.
    return "forward:/";
  }
}

webapp-backend / pom. xml

<build>
    <plugins>
         ...
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <executions>
                <execution>
                    <id>Copy Vue.js frontend assets</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>src/main/resources/public</outputDirectory>
                        <overwrite>true</overwrite>
                        <resources>
                            <resource>
                                <directory>${project.parent.basedir}/webapp-frontend/dist</directory>
                                <includes>
                                    <include>static/</include>
                                    <include>index.html</include>
                                </includes>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

webapp-backend / src / main / resources / public / index. html (непустой индекс. html файл)

webapp / webapp-frontend / pom. xml

...
  <build>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>${frontend-maven-plugin.version}</version>
        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v10.0.0</nodeVersion>
            </configuration>
          </execution>
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npm run build</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>  
...

Answer 1

Вот некоторые вещи, которые нужно учитывать, я не знаю, поможет ли какая-либо из них, но мы никогда не узнаем:

На сервере:

• Проверьте еще раз свой сервер pom.xml и посмотрите, правильно ли в нем находятся необходимые зависимости
• Убедитесь, что у вас нет server.servlet.contextPath=/api в вашем application.properties
• Убедитесь, что application.properties содержит server.port=8080 (или просто не указывайте это свойство, порт по умолчанию - 8080).
• Не думаю, что GreetingController полезен ... Назначение @RequestMapping, которое вы указали в методе: чтобы ваш контроллер не вступал во владение, когда клиент обновляет свою страницу, а браузер отправляет /toto" ... Если у вас нет этого правила, ваш сервер попытается выполнить маршрут /toto, которого нет знать ... Попробуйте либо удалить @RequestMapping в вашем классе контроллера, либо удалите класс на данный момент ...

На внешнем интерфейсе:

• Вы сказали ваше приложение работало, когда вы выполняли команду npm run serve и пытались получить доступ к http://localhost:8080/ ... что нормально и странно. Эта команда позволяет вам иметь сервер внешнего интерфейса, чтобы быстрее разрабатывать свой интерфейс и компоненты. Вот мой vue.config.js, посмотрите, получите ли вы то же самое, или что-то похожее:

module.exports = {
    'outputDir': 'target/dist',
    'assetsDir': 'static',
    'devServer': {
        'port': 8088,
        'proxy': {
            '/api': {
                'target': 'http://localhost:8080',
                'ws': true,
                'changeOrigin': true
            }
        }
    },
    'transpileDependencies': [
        'vuetify'
    ]
}

Как вы можете видеть, мой внешний сервер dev доступен через порт 8088 => http://localhost:8088 ... Кроме того, у меня есть 'outputDir': 'target/dist',, чтобы убедиться, что мои js файлы записаны в правильный каталог.

Вот что вы можете сделать, чтобы убедиться, что ваши файлы веб-интерфейса и бэкэнда «подключен»: (в папке webapp)

1. mvn clean
2. Удалить папку webapp-backend/src/main/resources/public и все в ней.
3. Если у вас есть Во-первых, удалите webapp-backend/src/main/resources/index.html (мы никогда не узнаем)
4. Выполните mvn install
5. Проверьте webapp-backend/src/main/resources. У вас должна быть новая папка public и все в ней (index. html, static /)

Это должно помочь.

Если у вас есть public папка создана, вы все еще испытываете проблему с пустой страницей, тогда я не понимаю, что еще вы можете искать.

Но дайте ей go!