vue-cli项目打包出现空白页和路径错误问题

本文详细介绍了在使用Vue CLI进行项目打包时遇到的两个常见问题:文件引用路径错误和路由history模式导致的router-view内容无法显示。通过调整config/index.js中的assetsPublicPath属性和关闭history模式,可以有效解决这些问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue-cli项目打包:

1. 命令行输入:npm  run  build

    打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目。

第一个问题,文件引用路径。我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题。

解决:到config文件夹中打开index.js文件。

文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性:

assetsPublicPath属性作用是指定编译发布的根目录,‘/’指的是项目的根目录 ,’./’指的是当前目录。

改好之后重新打包项目,运行index.html文件,我们可以看到没有报错了。但是router-view里面的内容却出不来了。

 

第二个问题:router-view中的内容显示不出来。路由history模式。

这个坑是当你使用了路由之后,在没有后端配合的情况下就手贱打开路由history模式的时候,打包出来的文件也会是一片空白的情况,

很多人踩这个坑的时候花了很多时间,网上的教程基本上都是说的第一个坑,这个坑很少有人提起。

解决:// mode: 'history',//将这个模式关闭就好

### Vue3 项目打包后页面空白的原因及解决方案 #### 原因分析 当遇到 Vue3 项目打包后页面显示为空白的情况时,通常有几种常见原因: - **路径配置错误**:打包后的静态文件路径可能不正确,特别是在 `publicPath` 配置不当的情况下[^1]。 - **环境变量问题**:某些情况下,生产环境中使用的环境变量与开发时不一致可能导致应用无法正常加载资源[^2]。 - **依赖库版本冲突**:不同版本的依赖库之间可能存在兼容性问题,在构建过程中未能妥善处理这些差异也会引发此类现象[^3]。 #### 解决方案 ##### 修改 `vue.config.js` 如果项目中存在自定义配置,则需确保 `outputDir`, `assetsDir` `publicPath` 设置合理。对于大多数场景而言,默认设置即可满足需求;但如果部署到子目录下,则应调整 `publicPath` 的值为相对路径 `/your-sub-path/` 或者绝对 URL 地址。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-path/' : '/', }; ``` ##### 检查 HTML 文件引入顺序 确认 `index.html` 中 `<script>` 标签的位置是否恰当,特别是异步加载脚本时要保证其放置于 DOM 结构之后以便能够正确挂载应用程序实例。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>App</title> <!-- Other meta tags --> </head> <body> <div id="app"></div> <script src="/path/to/chunk-vendors.js"></script> <script src="/path/to/app.js"></script> </body> </html> ``` ##### 更新 Webpack 插件或 CLI 版本 有时旧版工具链中的 bug 可能会影响最终输出效果,尝试升级至最新稳定版本可以有效规避潜在风险[^4]。 ```bash npm install @vue/cli-service@latest --save-dev ``` ##### 清理缓存并重新安装依赖包 执行如下命令清除本地 node_modules 缓存,并重装所有必要的 npm 包以排除由于局部环境因素引起的问题。 ```bash rm -rf node_modules/.cache/ rm package-lock.json yarn.lock npm cache clean --force npm install ``` ##### 浏览器开发者工具排查 利用浏览器自带的开发者工具(F12),切换到 Network 标签下观察是否有请求失败的情况发生,同时注意 Console 输出的信息提示,这对于定位具体问题是很有帮助的。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值