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
