Vue构建部署教程

一、项目配置

1. 路由变更

修改前端项目的路由模式为 Hash，文件在 src/router/index.js，下述是 Vue3 的配置:

import {createRouter, createWebHashHistory} from 'vue-router'

const routes = pathArray

const router = createRouter({
    // 设置模式为 Hash
    history: createWebHashHistory(process.env.BASE_URL),
    routes
})

export default router

2. 服务配置

修改项目根目录下的 vue.config.js 文件，注意将其中的 192.168.0.100 替换为你自己的服务器 IP。

其中 8080 是前端的访问端口，9090 为后端服务端口，/daily-word 为前端接口前缀，/dailyWord 为后端配置的 servlet:context-path。

module.exports = defineConfig({
  devServer: {
    open: true,
    // frontend server host and port
    host: "192.168.0.100",
    port: 8080,
    https: false,
    proxy: {
      "/daily-word": {
        // backend server url
        target: "http://192.168.0.100:9090/",
        ws: true,
        changOrigin: true,
        pathRewrite: {
          // Rewrite path prefix to backend "servlet:context-path"
          "/daily-word": "/dailyWord"
        }
      }
    }
  }
})

3. 应用打包

在前端工程指定 build 命令完成后将会在项目根目录生成 dist 目录，其则为打包后的文件，将其上传到服务器的你期望的目录。

npm run build

二、后端配置

1. 跨域处理

为了部署之后前端接口请求能正常访问后端服务，后端需要设置跨域白名单。

在 Spring 工程中新建类并实现 WebMvcConfigurer 接口类定义跨域规则，这里为了方便我设置放行所有请求和地址，可根据需求进行调整。

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Value("${auth.host.cors}")
    private String hosts;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        String[] crosHost = hosts.trim().split(",");
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(TimeUnit.SECONDS.toMillis(5));
    }
}

三、服务部署

1. Nginx代理

上述打包完成后的文件为静态资源，因此这里选择通过 Nginx 实现页面的访问，具体的 Nginx 部署教程之前的文章已经详细介绍过，这里不再重复详细展开，链接直达：Nginx教程。

2. 请求转发

由于 Nginx 静态资源不支持 Post 接口请求，因此需要将请求进行转发。

location / {
    #root   html;
    #index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    error_page 405 =200  $request_uri;
}

3. 完整配置

完成的 Nginx 配置文件如下，其中 8080 为页面访问地址，需要和第一步中配置的一致，root 配置打包上传的 dist 目录路径。

注意将其中的 192.168.0.100 替换为你自己的服务器 IP。

server {
    listen       8080;
    server_name  localhost;
    root         /home/budai/dailyword/dist;

    location / {
        #root   html;
        #index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        error_page 405 =200  $request_uri;
    }

    location ^~ /daily-word {
        proxy_pass http://192.168.0.100:9090/dailyWord;
    }

    location @405 {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # ip为后端服务地址
        proxy_pass http://192.168.0.100:9090$request_uri;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}