vue项目部署和镜像打包

vue项目部署和镜像打包

SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程（原始部署/宝塔部署）

前端vue项目部署主要考虑以下方面：

vue项目启动、打包；

以vue-admin-template为例，开发环境启动项目：

# 进入项目目录
cd vue-admin-template

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev
1
2
3
4
5
6
7
8
9
10
11

打包发布，生成静态资源dist文件夹：

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod
1
2
3
4
5

后端项目地址配置；

开发环境配置后端地址：

在 Vue 前端项目中配置后端项目的访问地址可以通过修改项目的配置文件来实现。Vue 常用的配置文件是 vue.config.js，你可以按照以下步骤进行配置：

在 Vue 项目的根目录下，创建或编辑 vue.config.js 文件。

在 vue.config.js 中，可以使用 devServer 字段来配置开发服务器的代理。这个字段用于开发环境下的配置，方便在开发过程中代理请求到后端服务。

在 devServer 字段下添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-api.com', // 后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13

上述代码中，target 字段指定了后端项目的访问地址，你可以将 'http://backend-api.com' 替换为实际的后端地址。
'/api’是一个示例的路径前缀，用于匹配请求的 URL 中以 /api 开头的部分。你可以根据后端接口的实际情况进行调整。
changeOrigin 设置为 true 表示开启跨域请求。
pathRewrite 字段可以用于重写请求的路径，上述示例中将 /api 重写为空字符串，即将 /api 前缀去除。

通过以上配置，当你在 Vue 项目中发起以 /api 开头的请求时，开发服务器会将请求代理到后端地址。

需要注意的是，这种代理配置只适用于开发环境，当你打包部署到生产环境时，前端代码会被编译为静态资源文件，无需再配置代理。在生产环境中，你需要确保前端静态资源文件与后端项目部署在同一个域名下或通过其他方式进行跨域配置。

原文链接：vue前端项目如何配置后端项目的请求地址

生产环境配置后端地址：

生产环境配置后端地址，需要放在nginx配置文件中，参见下一节nginx安装、配置和部署

Nginx安装、配置和前端部署；

前端项目部署方式：

1. 打包成静态文件跟后端项目部署在一起；
2. 打包成静态文件部署到单独服务器中（nginx）

方式一：
前端打包到后端 一起部署到服务器
前后端分离项目的部署方法

方式二：
nginx安装-略

nginx常见命令：

# 启动
start nginx
# 停止
nginx -s stop
# 重启
nginx -s reload
# 检查 NGINX 是否正常工作，并显示任何错误或警告信息
nginx -t
# 查看nginx
1
2
3
4
5
6
7
8
9

复制前端dist下的打包静态文件到nginx的html文件夹中

修改配置文件nginx.conf，进行前后端地址配置

# 进入nginx配置目录
cd /usr/local/nginx/conf
 
# 编译nginx.conf配置文件
vim nginx.conf
 
# 找到下面文件位置
server {
        listen       5173;//这里配置了前端请求端口，java应用的实际端口是8080
        server_name  192.168.12.131;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        # 前端请求地址
        location / {
            root   /usr/local/src/html;# 前端静态文件的实际位置
            index  index.html index.htm;
        }
 
        # 后端请求地址
        location /prod-api/ {
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.12.131:8080/;     # 后端接口地址
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

浏览器访问：localhost:5173/ 即可

常见错误：

• 403 Forbidden — 检查访问的端口是否错了；
• 404 NotFound —检查html文件夹文件、root配置地址、vue配置的publicPath三者是否一致；
• 后端接口访问错误 —检查proxy_pass 是否配置正确；
• nginx启动失败：[emerg] invalid number of arguments in “root“ directive in xxx ---- 检查root地址和格式是否正确，末尾有没有;

参考：
vue打包并部署到nginx上
Nginx前后端分离部署配置
Nginx部署vue项目

nginx配置多前端项目：
使用nginx部署多个前端项目（三种方式）
nginx部署多个前端项目详细步骤

前端部署的另一种

vue项目镜像打包；