vue cli 3 打包部署测试出现net::ERR_ABORTED 404 (Not Found)问题解决

5 篇文章 0 订阅
2 篇文章 0 订阅
本文介绍了在Vue CLI 3中遇到部署时net::ERR_ABORTED 404 (Not Found)错误的解决方法,重点在于调整vue.config.js中的publicPath配置,以适应不同部署环境的需求。同时,公共路径publicPath的设置会影响应用的基础URL,对于HTML5 history模式和多页面应用的构建也非常重要。
摘要由CSDN通过智能技术生成

vue cli 3 打包部署到服务器上出现net::ERR_ABORTED 404 (Not Found)问题解决

解决方法:配置vue.config.js如下:

module.exports = {
    publicPath: "./"
}

注意:具体配置请参考官网教程 https://cli.vuejs.org/zh/config/#vue-config-js

publicPath

  • Type: string

  • Default: '/'

    部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath

    默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath/my-app/

    这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。

    相对 publicPath 的限制

    相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath:

    • 当使用基于 HTML5 history.pushState 的路由时;
    • 当使用 pages 选项构建多页面应用时。

    这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径,你可以使用一个条件式的值:

    module.exports = {
      publicPath: process.env.NODE_ENV === 'production'
        ? '/production-sub-path/'
        : '/'
    }
    
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
Vue是一种非常流行的前端框架,它伴随着互联网的发展和技术进步而出现和发展。虽然Vue是一个非常出色的前端框架,但是在使用的过程中难免会遇到各种问题,如Vue报错net::err_connection_aborted。 net::err_connection_aborted是一种在使用Vue开发项目时可能会遇到的错误,在这种情况下,我们打开浏览器时会看到一个类似于“Page Not Found”的提示。这种情况的出现通常是因为前端代码无法正确地与服务器建立连接而导致的。 要解决这个问题,我们需要检查一些常见的问题: 首先,我们需要检查网络连接是否正常。如果我们的网络连接出现问题,我们将无法与服务器建立连接,这就会导致net::err_connection_aborted的错误。 其次,我们需要检查服务器是否处于正常运行状态。如果服务器出现问题,它将无法响应我们的请求,从而导致net::err_connection_aborted的错误。 此外,我们需要检查Vue应用程序的代码是否存在错误或者页面的路径是否正确。如果我们的代码存在错误或者路径错误,我们将无法正确地获取服务器端的数据,从而导致net::err_connection_aborted的错误。 总的来说,解决Vue报错net::err_connection_aborted问题需要我们仔细检查网络连接、服务器状态以及代码路径等可能影响的问题,并逐一解决它们。只有这样我们才能确保我们的Vue应用程序能够正确地运行并提供稳定的服务。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CHH5431

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值