Springbootにvueを公開する手順

2020年1月の時点で、これは最新のSpring Bootであるはずであり、vueはvue / cli @ 3を使用しています。

0.パッケージ化する前に、
vue。vue.config.jsで静的リソースのファイルパスを構成します。

module.exports = {
    
    
  publicPath: '/static/', // 这个指向的地址就是打包后,html文件引用js文件的路径地址.
}

指し示すアドレスは、パッケージ化後にhtmlファイルがjsファイルを参照するパスアドレスです。
次の例では、

   <link href=/static/js/chunk-2d0aa22f.a9d65018.js rel=prefetch>

構成されていない場合、生成されるデフォルトは

  <link href=./js/chunk-2d0aa22f.a9d65018.js rel=prefetch>

以下は、パッケージ化後のindex.htmlファイルのパス形式です。


<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/static/favicon.ico>
    <title>系统名称</title>
    <link href=/static/js/chunk-2d0aa22f.a9d65018.js rel=prefetch>
    <link href=/static/js/chunk-2d2095aa.366b4259.js rel=prefetch>
    <link href=/static/js/chunk-2d20f917.8ef14ced.js rel=prefetch>
    <link href=/static/js/chunk-2d2171a7.a48f9bdc.js rel=prefetch>
    <link href=/static/js/chunk-2d22b9a2.419944c0.js rel=prefetch>
    <link href=/static/js/chunk-2d22d746.5b2f8df2.js rel=prefetch>
    <link href=/static/js/chunk-6903437e.36a57aca.js rel=prefetch>
    <link href=/static/css/app.2ae7bbdf.css rel=preload as=style>
    <link href=/static/css/chunk-vendors.8a47258c.css rel=preload as=style>
    <link href=/static/js/app.03faaf38.js rel=preload as=script>
    <link href=/static/js/chunk-vendors.48ac303e.js rel=preload as=script>
    <link href=/static/css/chunk-vendors.8a47258c.css rel=stylesheet>
    <link href=/static/css/app.2ae7bbdf.css rel=stylesheet>
</head>
<body>
<noscript>
    <strong>We're sorry but citymanagesystemui doesn't work properly without JavaScript enabled. Please enable it to continue.
    </strong>
</noscript>
<div id=app>

</div>
<script src=/static/js/chunk-vendors.48ac303e.js>

</script>
<script src=/static/js/app.03faaf38.js>

</script>
</body>
</html>

1.パッケージ化vueコマンド

npm run build

2.vueパッケージによって生成されたdistディレクトリ内のすべてのファイルをSpringBootプロジェクトディレクトリにコピーします。次の図のようになります。

ここに画像の説明を挿入
3.構成ファイルを変更し、application.propertiesファイルの構成を変更して、上記のように静的リソースのパスを有効にします。

spring.mvc.static-path-pattern=/static/**

4.新しいテンプレートディレクトリを作成します。生成されたindex.htmlをこのディレクトリにコピーします。他のファイルをコピーする必要はありません。
ここに画像の説明を挿入

5.新しいControllerアノテーションを作成するに
は、@ RestControllerではなく@Controllerにする必要があります

/**
 * 首页
 * @author: 郑桂良
 * @create: 2021-1-4
 */
@Controller
public class IndexController {
    
    
    @RequestMapping("/")
    public String Index() {
    
    
        return "index"; // 这个就显示跳转到了index.html, 注意是templates下面的
    }
}

5.他に何もすることがないようです。デバッグを開始します。

Springbootにvueを公開する手順

おすすめ