解决vue项目 webpack 打包以后服务器访问空白

原创于 2025-06-11 19:29:43 发布 · 649 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #服务器

解决Vue打包后访问屏幕空白但是控制台没报错方法及问题原因

一般情况下打包后空白屏的问题造成原因是由静态资源路径错误引起的，可以在vue.config.js配置中添加配置，一般脚手架创建的项目都会有这个目录，没有的话需要自己创建。然后在里面添加如下配置：
```
module.exports={
	publicPath:'./'
}
```
解释：

因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。所以要改为 ‘./ ’
路由模式问题，路由模式有两种、history和hash。

history:

原理：利用window.history（history.pushState或history.replaceState）相关api实现路由跳转，从而改变页面内容。由于通过history的api进行路由跳转，并不会向服务器发起请求，所以也达到了前端路由的目的。

hash:

原理：当hash值发生改变时，并不会向服务器发送请求而是会触发onhashchange事件，从而根据hash值来修改页面内容。

两者区别：
1. hash路由地址栏上有 # ,而histoy路由没有
2. hash路由兼容性好点，history路由是在html5之后推出的
3. history 需要后端配合，否则页面刷新，或者根据路径直接访问项目会报404错误，因为打包后的文件一般只有一个index.html文件和一些打包后的js文件以及文件夹，所以需要后端重定向到首页，进入项目后，再进行路由配置。
解决办法：
- 检查服务器访问url中是否包含#
  
  包含:
```
# vue2 路由配置示例
const router = new Router({
  mode: 'hash', // 设置路由模式为 hash 模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
  ]
});

# vue3 路由配置示例
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
```
  不包含：
```
# vue2 路由配置示例
const router = new Router({
  mode: 'history', // 设置路由模式为 hash 模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
  ]
});

# vue3 路由配置示例
const router = createRouter({
  history: createWebHistory history,
  routes
})
```
静态资源路径错误

打包后的静态资源路径可能与实际部署环境不匹配。

解决办法：

检查 vue.config.js 中的 publicPath 配置，确保与部署环境一致。例如：
```
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/path/' : './'
};
```
未正确引入资源文件

解决方法：
- 检查 dist 目录下的 index.html 文件，确认资源路径是否正确。
- 确保构建命令和部署方式一致（如相对路径或绝对路径）。