vue项目打包部署到nginx服务器上

最新推荐文章于 2025-06-13 20:32:27 发布

原创

最新推荐文章于 2025-06-13 20:32:27 发布 · 置顶 · 2.4k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了如何将Vue项目打包并部署到nginx服务器。首先，需要修改项目配置，包括资源路径、代理配置和路由模式。然后，下载并配置nginx，包括安装、修改主机配置以及启动和热加载服务。在部署过程中，可能会遇到502 Bad Gateway错误，这通常是由后端服务异常导致的，重启后端服务即可解决。

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

一,打包前的项目配置修改

修改资料路径并对之前开发环境的代理配置进行注释

修改资源访问路径publicPath: "./",目的是为了避免出现打包访问时出现空白页面

注释开发环境代理配置是由于后面在nginx进行代理配置

module.exports = {
   
   
  publicPath: "./",
  outputDir: "dist", // 输出文件目录
  //assetsDir: "static", // 配置js、css静态资源二级目录的位置
  devServer: {
   
   
    open: true, //设置启动项目时默认打开浏览器
    // proxy: {
   
   
    //   "/api": {
   
   
    //     target: "http://192.168.0.102:8081",
    //     changeOrigin: true,
    //     pathRewrite: {