vue项目打包上线流程（nginx服务器配置、路由history模式白屏如何处理）

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

迪邦尼

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

阅读量611

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue nginx

本文链接：https://blog.csdn.net/Zgtby/article/details/117694893

本文详细介绍了Vue项目从打包到上线的全流程，包括新建vue.config.js配置静态资源路径，关闭SourceMap，配置跨域和alias，使用CDN加速，去除console.log和图片压缩。同时，讲解了Nginx服务器的配置，如路由设为history模式，处理白屏问题，以及常用Nginx命令的操作。

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

VUE项目的打包流程

我们在项目打包时执行以下代码：

npm run build

1、新建vue.config.js,设置静态资源路径为’./’,解决打包后默认路径的白屏问题

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

2、关闭生产环境下的SourceMap映射文件,包的大小减少80%

module.exports = {
   
   
	productionSourceMap: false,
}

3、配置跨域

module.exports = {
   
   
  devServer: {
   
   
   open: false, // 自动启动浏览器
   host: '0.0.0.0', // localhost
   port: 6060, // 端口号
   hotOnly: false, // 热更新

   overlay: {
   
   
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    proxy: {
   
   
      //配置跨域
      '/api': {
   
   
        target: 'https://www.test.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
   
   
          '^/api': '/'
        }
      }
    }
  }
}