Vue Naive Admin

# 全局scss变量

# 文件路径

src/styles/variables.scss

# 作用

可以在项目内组件内和scss样式文件处使用定义的全局scss变量而无需引入

# 配置方式

// vite.config.js
css: {
	preprocessorOptions: {
    //define global scss variable
    scss: {
      additionalData: `@import '@/styles/variables.scss';`,
    },
  }
}
1
2
3
4
5
6
7
8
9

# Naive UI主题调整

Naive UI提供了调整主题变量的选择，可以通过设定 n-config-provider 的 theme-overrides 来调整主题变量，具体方式可以参考Naive UI文档 (opens new window)，此项目已经集成处理了，只需要修改src/store/modules/app.js文件的配置即可生效

import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state() {
    return {
      themeOverrides: {
        common: {
          primaryColor: '#316c72',
          primaryColorSuppl: '#316c72',
          primaryColorHover: '#316c72',
          successColorHover: '#316c72',
          successColorSuppl: '#316c72',
        },
      },
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 环境配置

配置说明

  • 只有以VITE_开头的变量才会被载入，访问方式：const title = import.meta.env.VITE_APP_TITLE
  • 以VITE_GLOB_开头的变量在打包的时候会被写入到app.config.js文件中，如需修改线上配置项可以直接修改app.config.js文件而无需重新打包

# .env

在所有环境都会被载入

# 标题（用于登录页的标题、页面标签的title以及logo处的标题）
VITE_APP_TITLE = 'Vue Naive Admin'

# 端口号
VITE_PORT = 3100

# 打包时自动生成CNAME文件，用于配置github pages自定义域名，如不需要可注释或者直接删除
VITE_APP_GLOB_CNAME = 'template.isme.top'
1
2
3
4
5
6
7
8

# .env.development

开发环境载入

# 资源公共路径,需要以 /开头和结尾
VITE_PUBLIC_PATH = '/'

# 是否启用MOCK
VITE_APP_USE_MOCK = true

# proxy（多个proxy不能换行）
VITE_PROXY = [["/api","http://localhost:8080"],["/api-test","localhost:8080"]]

# base api
VITE_APP_GLOB_BASE_API = '/api'

# test base api
VITE_APP_GLOB_BASE_API_TEST = '/api-test'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# .env.production

生产环境载入

VITE_PUBLIC_PATH = '/'

# 是否启用MOCK
VITE_APP_USE_MOCK = false

# base api
VITE_APP_GLOB_BASE_API = 'https://www.baidu.com'

# test base api
VITE_APP_GLOB_BASE_API_TEST = 'https://www.baidu.com'
1
2
3
4
5
6
7
8
9
10

# .env.staging、.env.test

分别在预发布环境和测试环境载入，配置同.env.production

# 生产环境变量动态配置

# 说明

此配置参考vben admin (opens new window)，当项目构建完成后，会自动生成 app.config.js 文件并插入 index.html

# 作用

app.config.js 用于项目在打包后，需要动态修改配置的需求，如接口地址。不用重新进行打包，可在打包后修改 /dist/_app.config.js 内的变量，刷新即可更新代码内的局部变量

# 如何新增一个可动态修改的配置项

在 .env 或者对应的开发环境配置文件内，新增需要可动态配置的变量，以 VITE_GLOB_开头即可

← 工具封装 →