Как разрешить Vue Router обрабатывать запрос при встраивании с весенним загрузочным webflux? - PullRequest
Новая
       31

Как разрешить Vue Router обрабатывать запрос при встраивании с весенним загрузочным webflux?

0 голосов
/ 04 ноября 2019

Я пишу проект vue cli, а затем хочу развернуть его в своем проекте с полной загрузкой, но не могу понять, как мне это сделать. Вот что я сделал до сих пор:

  • Сначала у меня есть мой простой проект Vue, написанный с использованием 3 маршрута, а затем я строю проект с использованием npm run build
  • Затем скопируйте его встатическая папка (/ resources / static /) моего весеннего проекта
  • И я ссылаюсь на нее из /templates/index.html, используя Thymeleaf.
  • А затем я сопоставляю свой контроллер Spring и указываю "/"индексировать (/templates/index.html) файл и, делая это, я мог бы обслуживать свои статические ресурсы, но есть проблема, это статическая ситуация, поэтому я не мог получить доступ к какой-либо странице непосредственно из браузера. Например, я мог получить доступ к localhost: 8080, а не localhost: 8080 / about или localhost: 8080 / hello / world page, если нет ссылки, по которой я могу щелкнуть с localhost: 8080. Короче говоря, он не использует маршрут vue для обработки любого запроса, но статически обслуживает Spring.

В моем проекте vue мой маршрут записан как: 

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/hello/world',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

Вот мой шаблон / index.html 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>VueJs + Spring Data REST</title>
    <link rel="icon" href="/dist/favicon.ico">
    <link rel="stylesheet" href="/dist/index.css" />
</head>
<body>

<noscript>
    <strong>We're sorry but web-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!--!!!WARNING:: Bundle script might not able to be find in production. Match it with index.html if cannot find solution...!!!-->
<script src="/dist/bundle.js"></script>

</body>
</html>

А вот мой файл vue.config.js: 

const path = require('path');

if (process.env.NODE_ENV === 'production') {
  module.exports = {
    productionSourceMap: false,
    outputDir: path.resolve(__dirname, '../static/dist/'),
    assetsDir: '../assets/',
    configureWebpack: {
      output: {
        filename: 'bundle.js',
      },
      optimization: {
        splitChunks: false, // changing this will result in error ui can't load
      },
    },
    css: {
      extract: {
        filename: '../dist/index.css',
      },
    },
    pluginOptions: {
      i18n: {
        locale: 'en',
        fallbackLocale: 'en',
        localeDir: 'locales',
        enableInSFC: false,
      },
    },
  };
}

А вот мой контроллер: 

@Controller
class RedirectController{

    @GetMapping("/*")
    fun get(): String {
        return "index";
    }
}

Вот моя структура ресурсов: 

.
├── application.yml
├── js
│   ├── babel.config.js
│   ├── package.json
│   ├── package-lock.json
│   ├── postcss.config.js
│   ├── public
│   │   └── favicon.ico
│   ├── README.md
│   ├── src
│   │   ├── App.vue
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   └── HelloWorld.vue
│   │   ├── i18n.js
│   │   ├── locales
│   │   │   ├── en.json
│   │   │   └── kh.json
│   │   ├── main.js
│   │   ├── router
│   │   │   └── index.js
│   │   ├── store
│   │   │   └── index.js
│   │   └── views
│   │       ├── About.vue
│   │       └── Home.vue
│   └── vue.config.js
├── static
│   ├── assets
│   │   ├── css
│   │   │   └── about.e8edd4ed.css
│   │   ├── img
│   │   │   └── logo.82b9c7a5.png
│   │   └── js
│   │       └── about.b1f37908.js
│   └── dist
│       ├── bundle.js
│       ├── favicon.ico
│       ├── index.css
│       └── index.html
└── templates
    └── index.html

Итак, как я могу сделать так, чтобы vue router мог обрабатывать все запросы вместо Spring? или можно перенаправить все эти запросы из Spring на маршрутизатор vue и ответить обратно или любым другим способом?

...