CSS/JS/图片全挂了，部署后页面白屏/资源加载失败？这两个配置项坑了多少人！

很多同学在本地开发时一切正常，但一把项目部署到服务器上就各种崩溃：页面打不开、图片不显示、甚至连JS文件都404了。其实这些问题大概率都跟两个配置有关，而且都和路径相关！

今天就用大白话讲清楚这两个配置到底管啥用，以及怎么设置才能避免部署翻车。

这通常是因为资源路径错了。

想象一下：

你写完代码打包后，生成一个dist文件夹。里面虽然有很多资源，但最终只有一个index.html（因为是单页面应用）。

部署到服务器后，你访问首页（比如 www.example.com）能正常打开，但一点其他路由（比如 www.example.com/about）就白屏，或者资源加载失败。

为什么？

因为你打包时资源用的是相对路径 （比如 ./static/js/main.js）。当你访问首页时，浏览器拼接出来的路径是：
www.example.com/static/js/main.js ✅ 能访问到。

但如果你访问的是/about页面，浏览器会尝试拼接：
www.example.com/about/static/js/main.js ❌ 这个路径根本不存在！

怎么解决？

在打包工具的配置中（比如Vue的vue.config.js或React的webpack.config.js）设置**公共路径（publicPath）**为绝对路径：

js 复制代码

// vue.config.js
module.exports = {
  publicPath: '/'
  // 或者如果你的项目部署在子路径（如/www/demo/），则设为 '/demo/'
};

这样打包后所有资源都会从根路径开始查找（比如 /static/js/main.js），不管在哪个页面访问，资源路径都是对的。

这是因为路由配置少了基础路径。

比如你的项目部署在服务器子目录（如 www.example.com/demo/），但你的路由配置还是本地开发时的根路径：

js 复制代码

const router = new VueRouter({
  routes: [...],
  mode: 'history'
});

结果你访问 www.example.com/demo/about 时，路由拿着/about去匹配，但实际部署的路径是/demo/about，当然匹配不上！

怎么解决？

在路由配置中加上base选项：

js 复制代码

const router = new VueRouter({
  routes: [...],
  mode: 'history',
  base: '/demo/' // 这里填你的部署子路径
});

更聪明的做法是通过环境变量动态设置：

js 复制代码

base: process.env.BASE_URL

然后在开发环境设为空，生产环境设为你的子路径（比如/demo/），这样本地和部署都能正常工作。

这两个配置项改起来就一行代码，但如果不理解背后的原理，出了问题根本不知道从哪下手。希望这篇能帮你少走弯路！