Vue3+Vite3多项目Nginx部署

一、概述

1.1. 问题描述

将多个 Vue3 + Vite3 构建的项目部署到服务器上,使用 Nginx 进行反向代理,实现同一域名和端口号,且不同路径前缀访问不同项目。

1.2. 准备工作

本文将假设有以下2个项目需要进行部署:

项目名 访问路径
project /*
project-admin /admin/*

二、Vue 项目的构建

2.1. 多环境的配置

VITE_BASE_PATH 参数为项目静态资源的访问路径。

  • project/.env.production
NODE_ENV = production

VITE_BASE_PATH = /
  • project-admin/.env.production
NODE_ENV = production

VITE_BASE_PATH = /admin/

2.2. vite.config.ts 文件修改

添加 base 属性,设置静态资源的基础路径。

官方文档详细介绍:https://cn.vitejs.dev/config/shared-options.html#base

import { ConfigEnv, defineConfig, loadEnv } from 'vite'

export default ({ command, mode }: ConfigEnv) =>{
  const env = loadEnv(mode, process.cwd());

  return defineConfig({
    base: env.VITE_BASE_PATH
  })
}

2.3. src/router/index.ts 文件修改

const router: Router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_PATH as string),
  routes
});

2.4. 添加 base 标签

设置 a、img、link 等标签链接的基础路径。

Vite 本身没有像 vue-cli 的模板语法功能,可以借助 vite 的 html 替换插件实现动态设置 base。
参考: vite-plugin-html 插件

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <base href="/admin/">
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admintitle>
  head>
  <body>
    <div id="app">div>
    <script type="module" src="/src/main.ts">script>
  body>
html>

之后在使用 a 标签时,如 test (base标签的url末尾有“/”,则a标签的url第一个字符不能是“/”),将会跳转到 /admin/test

2.5. 打包生成dist文件夹

我的 vue 项目的 package.json 文件中的 scripts 如下:

{
  "scripts": {
    "dev": "cross-env vite --mode development",
    "product": "cross-env vite --mode production",
    "build": "vue-tsc --noEmit && vite build",
    "build:dev": "cross-env vite build --mode development",
    "build:product": "cross-env vite build --mode production",
    "preview": "vite preview"
  }
}

通过调用 yarn build:product 命令执行打包指令生成dist文件夹。

2.5. 上传项目文件

使用 Xftp 将 project 项目 dist 文件夹中所有文件上传到 /home/www 目录中,将 project-admin 项目 dist 文件夹中所有文件上传到 /home/admin 目录中。

三、Nginx 配置

server {
    listen       80;
    server_name  xxx.xxx.xxx.xxx; # 服务器IP地址

    location / {
        alias   /home/www/;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /admin {
        alias   /home/admin/;
        index  index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
    }
}
# 重新加载配置
$ nginx -s reload

最后访问 http://xxx.xxx.xxx.xxx 或 http://xxx.xxx.xxx.xxx/admin 即可访问不同项目。

你可能感兴趣的:(nginx,vue.js,前端)