vite spa单页应用 & nginx 项目部署

1. vite 环境配置

• envDir：用于加载 .env 文件的目录
• envPrefix：以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中

项目目录

├── My App Dir
  ├── env
    ├── .env（全局）
    ├── .env.dev
    ├── .env.test
    ├── .env.pre
    ├── .env.prod
  ├── src
  ├── package.json
  ├── ...

npm scripts

"scripts": {
  "dev": "vite --mode dev",
  "test": "vite build --mode test",
  "pre": "vite build --mode pre",
  "prod": "vite build --mode prod",
}

vite.config.ts

import { join } from "node:path";
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  const envDir = join(__dirname, "env");
  const envPrefix = "CUSTOM_";
  const env = loadEnv(mode, envDir, envPrefix);

  console.log(env.CUSTOM_VITE_BASE)

  return {
    base: env.CUSTOM_VITE_BASE ?? '/',
    envDir,
    envPrefix,
    // ...
  };
});

2. spa单页应用 react

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import ReactDOM from "react-dom/client";

const router = createBrowserRouter([
  // ...
], {
  basename: import.meta.env.CUSTOM_ROUTER_BASE,
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <RouterProvider router={router} />,
);

vue

import { createApp } from 'vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.CUSTOM_ROUTER_BASE),
  strict: true,
  routes: [
    // ...
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

3. nginx 部署配置

3.1 安装nginx

• 先安装nginx brew install nginx
• 通过下面命令 都可以找到nginx配置文件路径
  • nginx -t
  • brew info nginx

3.2 spa前端项目部署到根域名配置

server {
    listen       8000;
    server_name  localhost;

    location / {
        root   ~/Projects/my-app/dist;
        try_files $uri $uri/ /index.html;
    }
    location /index.html {
        # html文件不缓存
        add_header Cache-Control 'no-cache, no-store, must-revalidate';
        add_header Pragma 'no-cache';
        add_header Expires '0';
    }
}

3.2 spa前端项目部署到根域名app目录下

• 前端环境变量CUSTOM_ROUTER_BASE 改为 app
• 前端环境变量CUSTOM_VITE_BASE 改为 app，修改vite配置项base为app

注意：如果项目静态资源上传的oss，这里应该改为cdn前缀，该配置项与webpack配置output的子项publicPath作用一致

server {
    listen       8000;
    server_name  localhost;

    location /app {
        root   ~/Projects/my-app/dist;
        # index.html上层目录与 前端环境变量CUSTOM_ROUTER_BASE保持一致
        try_files $uri $uri/ /app/index.html;
    }
    location /app/index.html {
        root ~/Projects/my-app/dist;
    
        # html文件不缓存
        add_header Cache-Control 'no-cache, no-store, must-revalidate';
        add_header Pragma 'no-cache';
        add_header Expires '0';
    }
}