Vue 项目部署时静态资源找不到的解决方法
153 浏览量
更新于2024-08-30
收藏 267KB PDF 举报
"Vue 项目中 webpack build 静态资源找不到的解决方法"
在 Vue 项目中,使用 Vue CLI 搭建的项目,在本地测试和调试都没有问题,但是在服务器上部署时,静态资源找不到,这个问题是怎么回事?今天,我们将探索这个问题的解决方法。
首先,让我们来了解一下问题的背景。我们使用 Vue CLI 搭建了一个项目,在本地测试和调试都没有问题,但是在服务器上部署时,静态资源找不到。我们使用 npm run dev 命令来启动开发服务器,开发服务器工作正常,但是当我们使用 npm run build 命令来构建生产环境时,静态资源找不到。
问题的原因是服务器没有指定项目目录,因此需要在打包时对打包文件添加访问的项目名称。我们需要在配置打包路径时加上项目名称,以便服务器可以正确地访问静态资源。
解决方法是修改 config/index.js 文件中的 assetsPublicPath 配置项,添加项目名称的路径。例如,我们可以将 assetsPublicPath 设置为 '/deploy/',这样静态资源的访问路径将是 https://bigdata.yiche.com/deploy/static/css/app.149f36018149fcbe537f02cafdc6f047.css。
在这个解决方法中,我们需要注意 assetsPublicPath 末尾的斜杠一定要加,不然部分 js 打包后会出现 https://bigdata.yiche.com/deploystatic/css/app.149f36018149fcbe537f02cafdc6f047 这样的情况。
此外,我们还需要了解 Vue CLI 默认的 webpack 配置。Vue CLI 使用 webpack 来构建项目,默认的配置文件是 config/index.js。在这个文件中,我们可以看到 build 配置项,包括 env、index 和 assetsRoot 等设置项。这些设置项决定了打包后的文件引用路径。
解决 Vue 项目中 webpack build 静态资源找不到的问题需要修改 config/index.js 文件中的 assetsPublicPath 配置项,添加项目名称的路径,并且注意 assetsPublicPath 末尾的斜杠一定要加。这样,我们就可以正确地访问静态资源,解决服务器上部署时静态资源找不到的问题。
2021-01-22 上传
2020-12-09 上传
2020-10-14 上传
2023-05-01 上传
2023-06-01 上传
2023-06-10 上传
2023-06-09 上传
2023-07-15 上传
2023-06-09 上传
weixin_38618312
- 粉丝: 4
- 资源: 890
最新资源
- OptiX传输试题与SDH基础知识
- C++Builder函数详解与应用
- Linux shell (bash) 文件与字符串比较运算符详解
- Adam Gawne-Cain解读英文版WKT格式与常见投影标准
- dos命令详解:基础操作与网络测试必备
- Windows 蓝屏代码解析与处理指南
- PSoC CY8C24533在电动自行车控制器设计中的应用
- PHP整合FCKeditor网页编辑器教程
- Java Swing计算器源码示例:初学者入门教程
- Eclipse平台上的可视化开发:使用VEP与SWT
- 软件工程CASE工具实践指南
- AIX LVM详解:网络存储架构与管理
- 递归算法解析:文件系统、XML与树图
- 使用Struts2与MySQL构建Web登录验证教程
- PHP5 CLI模式:用PHP编写Shell脚本教程
- MyBatis与Spring完美整合:1.0.0-RC3详解