vue-cli + vue3.0创建的项目，打包后白屏

最新推荐文章于 2025-05-11 22:08:26 发布

天外天-亮

最新推荐文章于 2025-05-11 22:08:26 发布

阅读量1.1k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44384273/article/details/136686824

一、首先先确认下打包后路径是否正确

publicPath: process.env.NODE_ENV === ‘production’ ? ‘./’ : ‘/’,
vue2.0 是 baseUrl
vue3.0 换成了 publicPath

在这里插入图片描述
如果上面配置是正确的，我们再继续查找别的原因

二、检查是否使用了 Vue Router history 模式。

如果使用了 Vue Router history 模式，在打包后需要配置服务器，以避免出现404错误。可以选择在服务器上使用路由重定向来解决，如果只是静态页，没有对应服务器还是建议使用 hash 模式:
在这里插入图片描述
这样打包后，就可以直接看了！

下面是记录一个 vue.config.js配置，大家根据自己的项目酌情参考：

const { defineConfig } = require('@vue/cli-service');
const resolve = dir => {
  return path.join(__dirname, dir);
};
module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  // 输出文件目录
  outputDir: 'dist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputD