如何进行vue项目的部署

最新推荐文章于 2024-07-02 22:05:51 发布

彭某某[皱眉]

最新推荐文章于 2024-07-02 22:05:51 发布

阅读量2.3w

点赞数 18

分类专栏： Vue 文章标签： java vue

本文链接：https://blog.csdn.net/weixin_44382147/article/details/110387792

版权

本文介绍了Vue项目的部署方法，包括在SpringBoot中作为静态资源部署和使用Nginx代理的两种方案。在SpringBoot中部署时，Vue打包后的静态文件放入static目录下，通过http://ip:port/xxx/index.html访问。使用Nginx部署时，配置代理，前端请求/api/test将被代理到后端的http://localhost:8080/api/test。

摘要由CSDN通过智能技术生成

如何进行vue项目的部署

如何进行vue项目的部署

前言

在一开始接触vue尤其是初次进行打包后，我就有一个疑问，vue项目是怎么进行部署的？直接点开打包后的 index.html 后会得到下面的报错
这里页面发送的请求不是我想象中的http://ip:port/api/api1的格式，而是file:盘符:/api/api1的格式，这意味着index.html就只是一个html文件，打包只是把vue文件做了压缩处理。
在这里插入图片描述
这里就有一个疑问了，因为前后端分离，我在项目中在vue.config.js文件中设置了代理，但是为什么打包之后代理就失效了呢？

module.exports = {
   
    devServer: {
   
      // 启动端口
      port: '8001',
      /* 设置为0.0.0.0则所有的地址均能访问 */
      host: '0.0.0.0',
      /* 使用代理 */
      proxy: {