前端学习之路-项目实战（1）

第一步：在vite.config.js中配置base的路径

在打包项目之前需要在vite.config.js中配置base的路径，路径名为服务器自定义的路由别名：
比如:

import { fileURLToPath, URL } from "node:url";

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

export default defineConfig({
  plugins: [vue()],
  server: {
    host: true,
  },
  
  base: "/aaa/", // 这个配置很重要，要和nginx配置的路径别名一致
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

第二步: 修改Nginx配置

server {
    listen 3000;
  	...

    location / {
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    # 新增location块，用于处理/aaa路径的请求
    location ^~ /aaa {
        alias /www/sites/web/index/dist;
        index index.html index.htm;
        try_files $uri $uri/ /aaa/index.html; # 如过vue项目使用的是History模式的路由，则必须加此行配置
    }
}

新增location后，重启Nginx，在浏览器输入http://服务器ip/aaa访问即可