项目配置

基础配置

.env 基础配置

bash

# the base url of the application, the default is "/"
# if use a sub directory, it must be end with "/", like "/admin/" but not "/admin"
VITE_BASE_URL=/

VITE_APP_TITLE=Vue3NaiveAdmin

VITE_APP_DESC=Vue3NaiveAdmin is a fresh and elegant admin template

# the prefix of the icon name
VITE_ICON_PREFIX=icon

# the prefix of the local svg icon component, must include VITE_ICON_PREFIX
# format {VITE_ICON_PREFIX}-{local icon name}
VITE_ICON_LOCAL_PREFIX=icon-local

# auth route mode: static ｜ dynamic
VITE_AUTH_ROUTE_MODE=dynamic

# static auth route home
VITE_ROUTE_HOME=home

# default menu icon
VITE_MENU_ICON=ic:outline-format-list-bulleted

# whether to enable http proxy when is dev mode
VITE_HTTP_PROXY=Y

# axios timeout
VITE_HTTP_TIMEOUT=10000


# vue-router mode: hash | history | memory
VITE_ROUTER_HISTORY_MODE=history

# success code of backend service, when the code is received, the request is successful
VITE_SERVICE_SUCCESS_CODE=200

# logout codes of backend service, when the code is received, the user will be logged out and redirected to login page
VITE_SERVICE_LOGOUT_CODES=1000

# modal logout codes of backend service, when the code is received, the user will be logged out by displaying a modal
VITE_SERVICE_MODAL_LOGOUT_CODES=7777,7778

# token expired codes of backend service, when the code is received, it will refresh the token and resend the request
VITE_SERVICE_EXPIRED_TOKEN_CODES=1001

# when the route mode is static, the defined super role
VITE_STATIC_SUPER_ROLE=R_SUPER

# sourcemap
VITE_SOURCE_MAP=N

# Used to differentiate storage across different domains
VITE_STORAGE_PREFIX=SOY_

# used to control whether the program automatically detects updates
VITE_AUTOMATICALLY_DETECT_UPDATE=Y

提示

比较重要的是 VITE_AUTH_ROUTE_MODE 配置， VITE_AUTH_ROUTE_MODE = dynamic 时，从后端加载菜单生成路由，static 时，使用本地路由

.env.prod 生产环境

bash

# backend service base url, prod environment
VITE_SERVICE_BASE_URL=`http://localhost:3000`

# other backend service base url, prod environment
VITE_OTHER_SERVICE_BASE_URL= `{"upload": "`http://localhost:3000`"}`

`baseUrl` 配置好以后，请求就相当于直接请求 ``http://localhost:3000`` 了，后台和前端在同一个服务器上都不需要配置代理就能访问了。

如果实在是需要配置 nginx 代理访问，那么这里就需要设置成 /api 之类的，然后去服务器的 nginx 里进行请求转发配置

Docker 配置

DockerFile

ARG PROJECT_DIR=/vue3-naive-admin

FROM node:22.3.0-alpine as builder
ARG PROJECT_DIR
WORKDIR $PROJECT_DIR

# 安装pnpm
RUN npm install -g pnpm

COPY . ./

# 安装依赖
# 若网络不通，可以使用淘宝源
# RUN pnpm config set registry https://registry.npmmirror.com
RUN rm -rf node_modules
RUN pnpm install

# 打包项目
ENV VITE_BASE_URL=/
RUN NODE_OPTIONS="--max-old-space-size=4096" pnpm build


# 配置 nginx
FROM nginx:alpine as production
ARG PROJECT_DIR

COPY --from=builder $PROJECT_DIR/dist/ /usr/share/nginx/html
COPY --from=builder $PROJECT_DIR/nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

生产环境的 `Dockerfile` 是 `Dockerfile.prod`，主要是少了项目下载依赖和打包的步骤，因为我的服务器太 `low` 了，打包很卡，所以我不在服务器打包，如果你想，可以自行加上与打包有关的步骤

docker-compose.yml

仅仅是为了能使用 docker-compose，可以更方便的构建和启动

yml

services:
  vue3-naive-admin:
    # 从当前路径构建镜像
    build:
      context: .
      dockerfile: Dockerfile
      target: production
    image: vue3-naive-admin:latest
    ports:
      - '80:80'

项目配置 ​

基础配置 ​

.env 基础配置 ​

.env.prod 生产环境 ​

Docker 配置 ​

DockerFile ​

docker-compose.yml ​