Vue项目本地运行正常但编译部署后无法加载页面内容问题排查求助

结合你的代码和场景（本地正常、部署后仅App.vue加载，路由组件Home.vue等无法加载），我梳理了几个最可能的原因及解决办法：

1. History模式的服务器Fallback配置缺失 #

你在路由中使用了mode: 'history'，这种模式下，服务器需要配置路径不存在时返回index.html的规则。如果没有配置，直接访问路由路径（比如/或/llistat）时，服务器会返回404，导致懒加载的组件无法正确加载。

不同服务器的配置示例： #

• Nginx：在你的server配置块中添加：

location / {
  try_files $uri $uri/ /index.html;
}

• Apache：在项目根目录创建.htaccess文件，内容如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

其他服务器（如Caddy、IIS）也需要对应配置类似的 fallback 规则。

2. 懒加载Chunk命名冲突 #

观察你的路由代码，两个懒加载组件的webpackChunkName都设置为"about"：

return import(/* webpackChunkName: "about" */ '../views/Home.vue')
return import(/* webpackChunkName: "about" */ '../views/Llistat_feina.vue')

这会导致Webpack将两个组件打包到同一个chunk文件中，可能引发加载冲突或路径解析异常。建议给每个懒加载组件设置唯一的chunk名称：

return import(/* webpackChunkName: "home" */ '../views/Home.vue')
return import(/* webpackChunkName: "llistat" */ '../views/Llistat_feina.vue')

修改后重新编译并部署即可。

3. publicPath（即BASE_URL）配置错误 #

路由中的base: process.env.BASE_URL对应Vue CLI项目中的publicPath配置。如果你的项目部署在服务器的子目录下（比如http://yourdomain.com/my-project/），但publicPath未正确设置，会导致懒加载的chunk文件请求路径错误，返回404。

解决方法： #

在项目根目录的vue.config.js中配置正确的publicPath：

module.exports = {
  // 部署在根目录则设为 '/'，子目录则设为 '/子目录名称/'
  publicPath: '/my-project/'
}

如果部署在根目录，publicPath可以设为'/'或者留空（默认值）。

4. 服务器文件权限问题 #

编译后的dist目录中的chunk文件（如js/home.xxxx.js）可能没有被赋予可读权限，导致浏览器请求时返回403错误。

解决方法： #

检查服务器上dist目录及内部文件的权限，确保Web服务器的运行用户（如Nginx的www-data用户、Apache的apache用户）拥有读取这些文件的权限。

快速定位问题的小技巧 #

打开浏览器开发者工具（F12），查看：

• Network面板：检查是否有返回404/403的JS chunk请求，这能直接指向路径或权限问题。
• Console面板：查看是否有加载chunk失败的错误提示，根据提示信息更快定位原因。

内容的提问来源于stack exchange，提问作者Xavier Bernadi