AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue 部署项目，访问页面空白,找不到js或css文件 (net::ERR_ABORTED 404 (Not Found))

2022-07-09 2834
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue 部署项目，访问页面空白,找不到js或css文件 (net::ERR_ABORTED 404 (Not Found))

问题

在本地部署之后访问完全没有问题


部署到阿里云服务器上，再访问页面出现空白页（也不是404），控制台给我打印没有这几个文件



原因

你的项目没有部署到你写的 publicPath 下，但是你是不知道的，那么publicPath 改为站点域名的根路径下就可以了


解决

在vue.config.js (vue-cli3以上)


是 publicPath 配置的原因


配置成


publicPath: './'
或者
publicPath: ''



更详细的配置可以查看：https://cli.vuejs.org/zh/config/index.html#publicpath

文章标签：
JavaScript
前端开发
关键词：
CSS js
JavaScript CSS
CSS页面
JavaScript页面
js CSS文件
流楚丶格念
目录
相关文章
你都不懂
|
2月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
你都不懂
196 2
我是快乐的嘟嘟
|
1月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
149 63
我是快乐的嘟嘟
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
186 26
大树营养快线
|
1月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量？
【10月更文挑战第28天】通过以上方法，可以在JavaScript中灵活地访问和修改CSS变量，从而实现根据用户交互、页面状态等动态地改变页面样式，为网页添加更多的交互性和动态效果。在实际应用中，可以根据具体的需求和场景选择合适的方法来操作CSS变量。
大树营养快线
75 15
追逐时光者
|
1月前
|
开发框架 网络协议 .NET
C#/.NET/.NET Core优秀项目和框架2024年10月简报
C#/.NET/.NET Core优秀项目和框架2024年10月简报
追逐时光者
58 3
dufadayang
|
2月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素，没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中，要保持灵活性，根据项目的发展和变化适时调整模块格式。
dufadayang
22 7
大树营养快线
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念，掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索，你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
大树营养快线
41 2
龙大吉
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用：Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展，Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新，为Web应用的构建提供了更多可能。在本篇文章中，我们将探讨Vue.js和Node.js这两大热门技术如何完美结合，构建现代Web应用。
龙大吉
38 4
dufadayang
|
2月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点，这些优点共同作用，使得项目能够更高效、更可靠地开发和运行。当然，在实际应用中，还需要根据项目的具体情况和需求进行合理的选择和配置。
dufadayang
39 6
大树营养快线
|
1月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素，通过仔细分析、排查和优化，逐步提高 Tree shaking 的效果，为项目带来更好的性能和用户体验。同时，持续关注和学习相关技术的发展，不断探索新的解决方案，以适应不断变化的项目需求。
大树营养快线
47 1

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 3
    vue之webpack打包原理和用法详解
  • 4
    VUE3中watch与watchEffect —— 全网最详细系列
  • 5
    中文代码示例之Vuejs入门教程(一)
  • 6
    vue中关于element的el-image 图片预览功能增加一个下载按钮
  • 7
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 8
    Vue3——使用v-if或v-show来实现过渡的动画效果
  • 9
    新建Vue项目
  • 10
    Vue表格显示问题：v-show无法影响el-table-column列的解决方案
  • 1
    如何在vue添加echarts图表
    86
  • 2
    使用Vue+ ECharts进行动态图表展示
    272
  • 3
    Vue引入Echarts图表的使用
    80
  • 4
    vue echarts图表自适应屏幕变化
    321
  • 5
    vue使用echarts图表
    82
  • 6
    vue 引简单引入echarts图表
    105
  • 7
    Vue打包后Echarts图表不显示问题解决
    975
  • 8
    Vue+Echarts图表动态适配
    228
  • 9
    vue如何使用Echarts图表
    244
  • 10
    Vue数据双向绑定实现原理
    208

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • JavaScript入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • JavaScript 自学手册文档教程
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 基于VUE的单页面性能优化实践
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS