vue-cli项目打包后部署到Nginx,axios请求接口404报错

最新推荐文章于 2025-05-30 09:34:33 发布

fj1247565817

最新推荐文章于 2025-05-30 09:34:33 发布

阅读量6k

点赞数

CC 4.0 BY-SA版权

分类专栏：问题文章标签： vue-cli项目 Nginx axios 404

本文链接：https://blog.youkuaiyun.com/fj1247565817/article/details/98795229

本文介绍了在vue-cli项目打包后部署到Nginx过程中遇到的axios请求404错误。首先，需要在vue.config.js中设置publicPath，然后调整路由的base。打包后，将dist文件夹内容放入Nginx的html目录。然而，这会导致axios请求失败。为解决这个问题，需要在Nginx的nginx.conf配置文件中添加相应的代理规则，重启Nginx服务后，404错误得以解决。

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

一、vue-cli打包

打包前，修改两处路径，一个是在vue.config.js下添加publicPath配置

	module.exports = {
	
	// 打包前修改静态文件路径
	publicPath: '/目录名', //Nginx下html文件夹里创建的目录名
	
    devServer : {
        proxy : {
            '/api' : {
                target : 'http://xx.xx.xx.xx',
                changeOrigin : true
            }
        }
    }
}

修改过后网页在开发环境下项目就不能正常运行了，打包后，静态资源就是在这个路径之后

再去修改路由，我的是history模式，修改base
在这里插入图片描述

// base: process.env.BASE_URL,//这是默认的
base: '在Nginx里的html下的目录名',

接下来就可以打包，npm run build
将打包好的dist文件夹里面的文件，复制到Nginx的html下的所创建的目录里，运行Nginx服务，这时访问locahost/目录名发现axios请求404报错

二、Nginx配置

找到Nginx里conf目录下的nginx.conf

最低0.47元/天解锁文章

200万优质内容无限畅学