毕设项目使用的vue3项目需要部署到服务器，在此记录一下。

无论哪种部署方式，都应该首先确保线上已经完成安装web服务器。

本文线上使用的web服务器是OpenResty，Nginx和Apache服务器部署方式类似。

第一种：本地打包方式

本方法部署需要现在本地打包好，然后上传至服务器部署。

1. 使用npm run build命令将项目打包成dist文件夹。

2.将打好的dist包上传至服务器。

3.将dist包转移至web服务器的site文件夹下，以确保你的web服务可以找到该dist包。以OpenResty示例，应将dist包转移至OpenResty/www/sites/server.chthollywn.xyz(你的网站域名)/目录下

4.将配置文件中的

root /www/sites/server.chthollywn.xyz/index;

配置修改为

root /www/sites/server.chthollywn.xyz/dist;

5.启动web服务，访问成功

第二种：线上打包方式

本方法直接将代码在线上打包，后期迭代升级会更加方便

本方法使用先需要首先在服务器安装node.js环境和npm命令

1.进入OpenResty/www/sites/server.chthollywn.xyz(你的网站域名)/目录下，使用git clone 命令克隆项目代码

2.进入项目，使用npm install命令安装项目依赖

3.使用npm run build命令打包

4.将配置文件中的

root /www/sites/server.chthollywn.xyz/index;

配置修改为

root /www/sites/server.chthollywn.xyz/web-server/dist;

5.启动web服务，访问成功

踩坑：代理转发

由于我的毕设是前后端分离项目，为了解决跨域问题前端配置了代理转发，如下

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8085",
        changeOrigin: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

这个配置在本地使用时完全没有问题，但是一旦上线就会发生接口404的错误

这是由于vue正向代理转发后，作为web服务器的nginx没有对转发的请求作反向代理，因此无法访问服务器上的资源。要解决该问题，需要在nginx配置中为后端接口做反向代理配置。

#vue项目中的请求地址前面都需要加上api
#发起请求的代理配置，地址包含/api的回全部替换地址并转发到proxy_pass下的地址
location /api { 
    proxy_pass http://127.0.0.1:8085; 
}

下面是完整的nginx配置

server {
    listen 80 ; 
    listen 443  ssl; 
    server_name server.chthollywn.xyz; 
    index index.php index.html index.htm default.php default.htm default.html; 
    proxy_set_header Host $host; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Host $server_name; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
    access_log /www/sites/server.chthollywn.xyz/log/access.log; 
    error_log /www/sites/server.chthollywn.xyz/log/error.log; 
    access_by_lua_file /www/common/waf/access.lua; 
    set $RulePath /www/sites/server.chthollywn.xyz/waf/rules; 
    set $logdir /www/sites/server.chthollywn.xyz/log; 
    set $redirect on; 
    set $attackLog on; 
    set $CCDeny off; 
    set $urlWhiteAllow off; 
    set $urlBlockDeny off; 
    set $argsDeny off; 
    set $postDeny off; 
    set $cookieDeny off; 
    set $fileExtDeny off; 
    set $ipBlockDeny off; 
    set $ipWhiteAllow off; 
    location ~ /.well-known/acme-challenge {
        allow all; 
        root /usr/share/nginx/html; 
    }
    #vue项目中的请求地址前面都需要加上api
    #发起请求的代理配置，地址包含/api的回全部替换地址并转发到proxy_pass下的地址
    location /api {
        proxy_pass http://127.0.0.1:8085; 
    }
    root /www/sites/server.chthollywn.xyz/web-server/dist; 
    if ($scheme = http) {
        return 301 https://$host$request_uri; 
    }
    ssl_certificate /www/sites/server.chthollywn.xyz/ssl/fullchain.pem; 
    ssl_certificate_key /www/sites/server.chthollywn.xyz/ssl/privkey.pem; 
    ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1; 
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5; 
    ssl_prefer_server_ciphers on; 
    ssl_session_cache shared:SSL:10m; 
    ssl_session_timeout 10m; 
    add_header Strict-Transport-Security "max-age=31536000"; 
    error_page 497 https://$host$request_uri; 
    proxy_set_header X-Forwarded-Proto https; 
}