Vue3+Vite3多项目Nginx部署

PrideZH

已于 2023-01-26 00:28:57 修改

阅读量3.9k

点赞数 2

文章标签： nginx vue.js 前端

于 2023-01-15 18:08:37 首次发布

本文链接：https://blog.csdn.net/PrideZH/article/details/128696360

版权

一、概述

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>Admin</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

之后在使用 a 标签时，如 <a href="test">test</a> (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;
    }
}