Vue项目部署在Spring Boot出现页面空白问题的解决方案

网上流行的解决方案是将assetsPublicPath: '/'改成'./',下面说一下这个解决方案的弊端:

通常页面空白的问题出现大多数是由于Spring Boot端配置了server.servlet.context-path,上下文改变了css, js等文件的访问路径,文件无法加载导致index.html显示空白。'/'改成'./'是将绝对路径变为相对路径,可以动态适应Spring Boot端上下文的改变,这是为什么这个解决方案起作用的原因。

Vue项目部署在Spring Boot出现的另一个常见问题是当刷新浏览器的时候出现white label, 也就是404错误,解决的方案基本是把error page配置成为Vue的index.html。

这两个解决方案有冲突的地方,当router出现子路径的时候刷新浏览器,error page会指向Vue的index.html页面,此时页面中访问css,js文件的路径是相对路径,也就是上下文路径+router子路径,这将导致css,js再次无法正常加载,这就是相对路径的弊端。

由于router会出现子路径,因此必须保证assetsPublicPath为绝对路径,下面讲一下保持绝对路径的解决方案:

1 假设Spring Boot端配置server.servlet.context-path: api, 对应Vue的/config/index.js中assetsPublicPath: '/'改成 '/api/'

2 router/index.js中配置base: '/api/', 这是保证浏览器刷新时上下文参数和router跳转路径一致。

3 对于Ajax请求需要配置baseURL, 如果使用Axios, 可以采用如下方法在main.js中配置

// http request 拦截器

Axios.interceptors.request.use(

config => {

if (localStorage.getItem('id_token')) {

config.headers.Authorization = localStorage.getItem('id_token')

}

config.baseURL = '/api'

return config

},

err => {

return Promise.reject(err)

})

4 另外需要注意的一点,按照Spring Boot默认配置, 在Vue端/config/index.js中assetsSubDirectory: 'static'要改变为其它字符,比如:'content', 'vue', 'api'等等。

5 试过将assetsSubDirectory配置为空,它和另一个css图片加载的方案有冲突,图片加载解决方案是在/build/util.js中加一行配置

// Extract CSS when that option is specified

// (which is the case during production build)

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

publicPath: '../../'

})

结尾附上Spring Boot端将error page指向Vue的index.html代码:

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.web.server.ConfigurableWebServerFactory;
import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.WebServerFactoryCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpStatus;


@Configuration
public class ServletConfig {
    private static final Logger logger = LoggerFactory.getLogger(ServletConfig.class);
    @Bean
    public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
        logger.info("come to 404 error page");
        return factory -> {
            ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
            factory.addErrorPages(error404Page);
        };

    }
}

总结:以上是Vue项目部署于Spring Boot中常见的几个问题的解决方案。如果遇到其它部署问题欢迎留言!

Cheers!

<think>好的,我需要帮助用户了解如何运行基于Vue的后端项目。用户的问题可能涉及到Vue CLI项目的启动和配置,但提到“后端项目”可能存在误解,因为Vue通常用于前端。不过根据提供的引用内容,用户可能是指一个前后端分离的项目,其中后端可能是SpringBoot,而前端是Vue。 首先,我需要确认用户的实际需求。根据引用3,提到了SpringBootVue的后台项目创建,所以用户可能想知道如何同时启动前端和后端服务。但问题更偏向于Vue后台项目的运行,因此重点放在前端部分。 接下来,根据引用2和5,Vue CLI是创建和管理Vue项目的工具,所以需要指导用户安装Vue CLI并运行项目。步骤可能包括安装依赖、启动开发服务器,以及生产构建。引用5提到了使用GoldPanKit快速构建,但用户可能更倾向于手动流程。 另外,引用1和4涉及路由配置,可能在启动项目时需要检查路由设置是否正确,确保默认路径指向正确的组件。例如,确保路由配置中的base URL正确,如引用4中的createWebHashHistory()可能会影响URL结构。 还需要考虑依赖安装的问题,用户可能不知道需要运行npm install来安装node_modules。同时,开发服务器和生产构建的命令不同,需要明确区分npm run serve和npm run build。 用户可能遇到的常见问题包括端口冲突、依赖缺失或路由配置错误,这些都需要在回答中提及解决方案。例如,修改端口可以在vue.config.js中配置devServer,或者检查路由文件是否正确定义了首页组件如HelloWorld.vue(引用1)。 最后,根据用户提供的引用3,后端项目可能需要单独启动,比如使用SpringBoot,运行主类或使用mvn spring-boot:run。因此,回答中需要涵盖前后端的启动步骤,但以Vue前端为主,并提及后端可能需要单独处理。 总结回答的结构:先安装依赖,然后启动前端服务,处理可能的问题,最后简要提及后端启动。同时,生成相关问题以帮助用户深入理解。</think>### 如何运行基于Vue的后台项目 #### 一、运行前端项目 1. **安装依赖** 在项目根目录下执行命令安装依赖: ```bash npm install ``` 如果使用Yarn: ```bash yarn install ``` 确保项目包含`package.json`文件,其中定义了依赖项[^2][^5]。 2. **启动开发服务器** 运行以下命令启动本地开发服务: ```bash npm run serve ``` 默认情况下,服务会运行在`http://localhost:8080`。若端口冲突,可在`vue.config.js`中添加配置: ```javascript module.exports = { devServer: { port: 3000 // 自定义端口 } } ``` 成功启动后,浏览器访问默认URL会跳转到`HelloWorld.vue`页面[^1][^4]。 3. **生产环境构建** 若需部署到服务器,执行构建命令生成静态文件: ```bash npm run build ``` 构建结果会输出到`dist`目录,可通过Web服务器(如Nginx)部署[^2][^5]。 --- #### 二、启动后端服务(以SpringBoot为例) 1. **运行主类** 使用IDE(如IntelliJ IDEA)直接运行`@SpringBootApplication`注解的主类。 2. **命令行构建** 若使用Maven,执行: ```bash mvn spring-boot:run ``` 后端服务默认端口为`8080`,可在`application.properties`中修改`server.port`[^3]。 --- #### 三、常见问题与解决 | 问题类型 | 解决方案 | |-------------------|------------------------------------------| | 路由跳转失败 | 检查`routes`配置中`path: '/'`是否指向正确组件 | | 依赖安装失败 | 清除缓存后重试:`npm cache clean --force` | | 接口跨域问题 | 在后端配置CORS或通过Vue代理(`vue.config.js`中设置`proxy`) | | 页面空白无内容 | 检查构建路径是否正确,确认`publicPath`配置匹配服务器目录 | ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值