使用 webpack devserver 时访问 Thymeleaf Spring Boot application.properties

Question

当浏览到 http://localhost:8081 上的应用程序时，我可以从 application.properties 访问相关的属性值，但不能通过 http://localhost:9090 使用 webpack devserver .

webpack.dev.js（开发服务器）

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {

    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
          template: 'src/main/resources/templates/index.html',
          title: 'Example Application'
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
          Popper: ['popper.js', 'default']
      })
    ],
    .
    .

    mode: 'development',
    devServer: {
        historyApiFallback: true,
        hot: true,
        port: 9090,
        proxy: {
            '/': {
                target: 'http://localhost:8081',
                secure: false,
                prependPath: false
            }
        },
        publicPath: 'http://localhost:9090/'
    },
    devtool: 'inline-source-map',
 });

index.html

 <html>
    <head>
       .
       .
      <script th:inline="javascript">
        var SERVICES_URL = [[${servicesUrl}]];
        var MAPS_URL = [[${mapsUrl}]];
      </script>     
   </head>
   <body>
      <div id="react"></div>
      <script src="/bundle.js"></script> 
   </body>
</html>

application.properties

services.url=https://example1.com
maps.url=https://example2.com

当使用 webpack devserver 访问任何 javascript 文件中的变量 SERVICES_URL 时，我收到以下错误，因为 Thymeleaf 没有为该变量赋值。

SyntaxError: missing ] after element list

我假设它在 webpack devserver 上不起作用，因为它只提供前端代码，而嵌入式 tomcat 服务器也提供服务器端代码。

Answer 1

这个问题的解决方案是从 webpack 配置文件中删除 HtmlWebpackPlugin，这样索引就不会从资源文件中加载，而是在 Thymeleaf 完成它的事情后从响应中加载。

   plugins: [
      new CleanWebpackPlugin(),
//    new HtmlWebpackPlugin({
//       template: 'src/main/resources/templates/index.html',
//       title: 'Example Application'
//    }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',
         'window.jQuery': 'jquery',
         Popper: ['popper.js', 'default']
      })
  ],

使用 webpack devserver 时访问 Thymeleaf Spring Boot application.properties

Accessing Thymeleaf Spring Boot application.properties when using webpack devserver

spring-boot

thymeleaf

webpack-dev-server