Vue CLI 3.0 整合 SpringBoot

SpringBoot 静态资源配置在最后面

• 打包

npm run build

• 将打包后dist目录下的所有文件复制到SpringBoot项目的static 目录，index.html复制到templates下 如下

目录结构

• 修改 index.html 引入静态资源路径前面添加 /static

修改 index.html

• 启动项目发现 大部分都正常 打开控制台 发现有一个错误

console

• 找了好久，发现这个错误是在打包后的app.js下面，所以打开简单修改一下，方便修改咱们格式化一下文件，找到如下两个方法

function u(e) {
    return i.p + "js/" + ({}[e] || e) + "." + {
        "chunk-2d0e6293": "77be8b50",
        "chunk-601beffa": "05b83ca0",
        "chunk-65dac8b2": "9ae7c53b",
        "chunk-72dec34e": "211d8e75",
        "chunk-7f5cfe7a": "f01e81e0",
        "chunk-8f009424": "69aa335a",
        "chunk-3aef91ec": "79206b37",
        "chunk-6b2c8e9b": "d95856ba",
        "chunk-96b7534e": "6d179d19"
    }[e] + ".js"
}

for (var r = "css/" + ({}[e] || e) + "." + {
    "chunk-2d0e6293": "31d6cfe0",
    "chunk-601beffa": "bdfb1f72",
    "chunk-65dac8b2": "4403b37f",
    "chunk-72dec34e": "1a06e128",
    "chunk-7f5cfe7a": "6a53cceb",
    "chunk-8f009424": "31d6cfe0",
    "chunk-3aef91ec": "aea17134",
    "chunk-6b2c8e9b": "8ab3e3a8",
    "chunk-96b7534e": "125df923"
} ...

修改 "js/"和"css/"为"static/js","static/css"

function u(e) {
    return i.p + "static/js/" + ({}[e] || e) + "." + {
        "chunk-2d0e6293": "77be8b50",
        "chunk-601beffa": "05b83ca0",
        "chunk-65dac8b2": "9ae7c53b",
        "chunk-72dec34e": "211d8e75",
        "chunk-7f5cfe7a": "f01e81e0",
        "chunk-8f009424": "69aa335a",
        "chunk-3aef91ec": "79206b37",
        "chunk-6b2c8e9b": "d95856ba",
        "chunk-96b7534e": "6d179d19"
    }[e] + ".js"
}

for (var r = "static/css/" + ({}[e] || e) + "." + {
    "chunk-2d0e6293": "31d6cfe0",
    "chunk-601beffa": "bdfb1f72",
    "chunk-65dac8b2": "4403b37f",
    "chunk-72dec34e": "1a06e128",
    "chunk-7f5cfe7a": "6a53cceb",
    "chunk-8f009424": "31d6cfe0",
    "chunk-3aef91ec": "aea17134",
    "chunk-6b2c8e9b": "8ab3e3a8",
    "chunk-96b7534e": "125df923"
} ...

完美

• SpringBoot 静态资源配置

spring:
    freemarker:
        charset: UTF-8
        default_encoding: UTF-8
        expose-session-attributes: true
        content-type: text/html;charset=UTF-8
        suffix: .html
        cache: false
    resources:
        static-locations: classpath:/META-INF/resources/,classpath:/resources/static/,classpath:/static/,classpath:/public