diff --git a/.env b/.env index f9cf7d9..d407df6 100644 --- a/.env +++ b/.env @@ -1,3 +1,3 @@ -VITE_APP_TITLE = 'Vue Naive Admin' +VITE_TITLE = 'Vue Naive Admin' VITE_PORT = 3100 diff --git a/.env.development b/.env.development index dbf6f6b..679e865 100644 --- a/.env.development +++ b/.env.development @@ -2,13 +2,13 @@ VITE_PUBLIC_PATH = '/' # 是否启用MOCK -VITE_APP_USE_MOCK = true +VITE_USE_MOCK = true -# proxy -VITE_PROXY = [["/api","http://localhost:8080"],["/api-test","localhost:8080"]] +# 是否启用MOCK +VITE_USE_PROXY = false + +# 代理类型(跟启动和构建环境无关) 'dev' | 'test' | 'prod' +VITE_PROXY_TYPE = 'dev' # base api -VITE_APP_BASE_API = '/api' - -# test base api -VITE_APP_BASE_API_TEST = '/api-test' \ No newline at end of file +VITE_BASE_API = '/api' \ No newline at end of file diff --git a/.env.github b/.env.github index b901816..beca876 100644 --- a/.env.github +++ b/.env.github @@ -1,16 +1,13 @@ # 自定义域名CNAME -# VITE_APP_GLOB_CNAME = 'template.qszone.com' +# VITE_CNAME = 'template.qszone.com' # 资源公共路径,需要以 /开头和结尾 VITE_PUBLIC_PATH = '/vue-naive-admin/' -VITE_APP_USE_HASH = true +VITE_USE_HASH = true # 是否启用MOCK -VITE_APP_USE_MOCK = true +VITE_USE_MOCK = true # base api -VITE_APP_BASE_API = '/api' - -# test base api -VITE_APP_BASE_API_TEST = '/api-test' \ No newline at end of file +VITE_BASE_API = '/api' \ No newline at end of file diff --git a/.env.production b/.env.production index 9987509..67c17e2 100644 --- a/.env.production +++ b/.env.production @@ -2,13 +2,10 @@ VITE_PUBLIC_PATH = '/' # 是否启用MOCK -VITE_APP_USE_MOCK = true +VITE_USE_MOCK = true # base api -VITE_APP_BASE_API = '/api' - -# test base api -VITE_APP_BASE_API_TEST = '/api-test' +VITE_BASE_API = '/api' # 是否启用压缩 VITE_USE_COMPRESS = true diff --git a/.env.test b/.env.test index 95d6ea1..5de4913 100644 --- a/.env.test +++ b/.env.test @@ -1,10 +1,7 @@ VITE_PUBLIC_PATH = '/' # 是否启用MOCK -VITE_APP_USE_MOCK = true +VITE_USE_MOCK = true # base api -VITE_APP_BASE_API = '/api' - -# test base api -VITE_APP_BASE_API_TEST = '/api-test' \ No newline at end of file +VITE_BASE_API = '/api' \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index b91edea..e84dd61 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,12 +1,15 @@ { - "files.eol": "\n", - + "path-intellisense.mappings": { + "@/": "${workspaceRoot}/src", + "~/": "${workspaceRoot}" + }, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.printWidth": 120, "prettier.singleQuote": true, "prettier.semi": false, "prettier.endOfLine": "lf", + "files.eol": "\n", "[javascript]": { "editor.formatOnSave": false diff --git a/build/config/define.js b/build/config/define.js new file mode 100644 index 0000000..4b10543 --- /dev/null +++ b/build/config/define.js @@ -0,0 +1,13 @@ +import dayjs from 'dayjs' + +/** + * * 此处定义的是全局常量，启动或打包后将添加到window中 + * https://vitejs.cn/config/#define + */ + +// 项目构建时间 +const _BUILD_TIME_ = JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss')) + +export const viteDefine = { + _BUILD_TIME_, +} diff --git a/build/config/index.js b/build/config/index.js new file mode 100644 index 0000000..967ddda --- /dev/null +++ b/build/config/index.js @@ -0,0 +1,2 @@ +export * from './define' +export * from './proxy' diff --git a/build/config/proxy.js b/build/config/proxy.js new file mode 100644 index 0000000..dd5338f --- /dev/null +++ b/build/config/proxy.js @@ -0,0 +1,16 @@ +import { getProxyConfig } from '../../settings' + +export function createViteProxy(isUseProxy = true, proxyType) { + if (!isUseProxy) return undefined + + const proxyConfig = getProxyConfig(proxyType) + console.log(proxyConfig) + const proxy = { + [proxyConfig.prefix]: { + target: proxyConfig.target, + changeOrigin: true, + rewrite: (path) => path.replace(new RegExp(`^${proxyConfig.prefix}`), ''), + }, + } + return proxy +} diff --git a/build/plugin/html.js b/build/plugin/html.js index 08552ca..7ed7f76 100644 --- a/build/plugin/html.js +++ b/build/plugin/html.js @@ -1,13 +1,13 @@ import { createHtmlPlugin } from 'vite-plugin-html' export function configHtmlPlugin(viteEnv, isBuild) { - const { VITE_APP_TITLE } = viteEnv + const { VITE_TITLE } = viteEnv const htmlPlugin = createHtmlPlugin({ minify: isBuild, inject: { data: { - title: VITE_APP_TITLE, + title: VITE_TITLE, }, }, }) diff --git a/build/plugin/index.js b/build/plugin/index.js index 1afd6d4..0fca2b9 100644 --- a/build/plugin/index.js +++ b/build/plugin/index.js @@ -24,7 +24,7 @@ import unplugin from './unplugin' export function createVitePlugins(viteEnv, isBuild) { const plugins = [vue(), vueSetupExtend(), ...unplugin, configHtmlPlugin(viteEnv, isBuild), Unocss()] - if (viteEnv?.VITE_APP_USE_MOCK) { + if (viteEnv?.VITE_USE_MOCK) { plugins.push(configMockPlugin(isBuild)) } diff --git a/build/plugin/unplugin.js b/build/plugin/unplugin.js index 2348810..2690bd5 100644 --- a/build/plugin/unplugin.js +++ b/build/plugin/unplugin.js @@ -1,3 +1,4 @@ +import { resolve } from 'path' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' @@ -12,9 +13,10 @@ import IconsResolver from 'unplugin-icons/resolver' import Icons from 'unplugin-icons/vite' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' -import { getRootPath } from '../utils' +import { getSrcPath } from '../utils' + +const customIconPath = resolve(getSrcPath(), 'assets/svg') -const customIconPath = getRootPath('src', 'assets/svg') export default [ AutoImport({ imports: ['vue', 'vue-router'], diff --git a/build/script/build-cname.js b/build/script/build-cname.js index f8421ab..7658c98 100644 --- a/build/script/build-cname.js +++ b/build/script/build-cname.js @@ -1,13 +1,14 @@ +import { resolve } from 'path' import chalk from 'chalk' import { writeFileSync } from 'fs-extra' import { OUTPUT_DIR } from '../constant' import { getEnvConfig, getRootPath } from '../utils' export function runBuildCNAME() { - const { VITE_APP_CNAME } = getEnvConfig() - if (!VITE_APP_CNAME) return + const { VITE_CNAME } = getEnvConfig() + if (!VITE_CNAME) return try { - writeFileSync(getRootPath(`${OUTPUT_DIR}/CNAME`), VITE_APP_CNAME) + writeFileSync(resolve(getRootPath(), `${OUTPUT_DIR}/CNAME`), VITE_CNAME) } catch (error) { console.log(chalk.red('CNAME file failed to package:\n' + error)) } diff --git a/build/utils.js b/build/utils.js index d5b6315..9b3f55d 100644 --- a/build/utils.js +++ b/build/utils.js @@ -2,53 +2,38 @@ import fs from 'fs' import path from 'path' import dotenv from 'dotenv' -const httpsReg = /^https:\/\// - -export function wrapperEnv(envOptions) { - if (!envOptions) return {} - const ret = {} - - for (const key in envOptions) { - let val = envOptions[key] - if (['true', 'false'].includes(val)) { - val = val === 'true' - } - if (['VITE_PORT'].includes(key)) { - val = +val - } - if (key === 'VITE_PROXY' && val && typeof val === 'string') { - try { - val = JSON.parse(val.replace(/'/g, '"')) - } catch (error) { - val = '' - } - } - ret[key] = val - if (typeof val === 'string') { - process.env[key] = val - } else if (typeof val === 'object') { - process.env[key] = JSON.stringify(val) - } - } - return ret +/** + * * 项目根路径 + * @descrition 结尾不带/ + */ +export function getRootPath() { + return path.resolve(process.cwd()) } -export function createProxy(list = []) { - const ret = {} - for (const [prefix, target] of list) { - const isHttps = httpsReg.test(target) +/** + * * 项目src路径 + * @param srcName src目录名称(默认: "src") + * @descrition 结尾不带斜杠 + */ +export function getSrcPath(srcName = 'src') { + return path.resolve(getRootPath(), srcName) +} - // https://github.com/http-party/node-http-proxy#options - ret[prefix] = { - target: target, - changeOrigin: true, - ws: true, - rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''), - // https is require secure=false - ...(isHttps ? { secure: false } : {}), - } +const httpsReg = /^https:\/\// + +export function convertEnv(envOptions) { + const result = {} + if (!envOptions) return result + + for (const envKey in envOptions) { + let envVal = envOptions[envKey] + if (['true', 'false'].includes(envVal)) envVal = envVal === 'true' + + if (['VITE_PORT'].includes(envKey)) envVal = +envVal + + result[envKey] = envVal } - return ret + return result } /** @@ -65,7 +50,7 @@ function getConfFiles() { return ['.env', '.env.local', '.env.production'] } -export function getEnvConfig(match = 'VITE_APP_GLOB_', confFiles = getConfFiles()) { +export function getEnvConfig(match = 'VITE_', confFiles = getConfFiles()) { let envConfig = {} confFiles.forEach((item) => { try { @@ -85,7 +70,3 @@ export function getEnvConfig(match = 'VITE_APP_GLOB_', confFiles = getConfFiles( }) return envConfig } - -export function getRootPath(...dir) { - return path.resolve(process.cwd(), ...dir) -} diff --git a/jsconfig.json b/jsconfig.json index b1963c2..d6b0629 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -2,6 +2,7 @@ "compilerOptions": { "baseUrl": "./", "paths": { + "~/*": ["./*"], "@/*": ["src/*"] }, "jsx": "preserve" diff --git a/package.json b/package.json index 96550f0..7fb4db2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@vueuse/core": "^8.4.2", "axios": "^0.21.4", "dayjs": "^1.11.0", + "lodash-es": "^4.17.21", "md-editor-v3": "^1.11.4", "mockjs": "^1.1.0", "pinia": "^2.0.13", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e3db429..f2f8c6f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,7 @@ specifiers: fs-extra: ^10.0.1 husky: ^8.0.1 lint-staged: ^13.0.3 + lodash-es: ^4.17.21 md-editor-v3: ^1.11.4 mockjs: ^1.1.0 naive-ui: ^2.32.1 @@ -47,6 +48,7 @@ dependencies: '@vueuse/core': 8.4.2_vue@3.2.31 axios: 0.21.4 dayjs: 1.11.0 + lodash-es: 4.17.21 md-editor-v3: 1.11.4 mockjs: 1.1.0 pinia: 2.0.13_vue@3.2.31 @@ -3284,7 +3286,6 @@ packages: /lodash-es/4.17.21: resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} - dev: true /lodash.map/4.6.0: resolution: {integrity: sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==} diff --git a/public/resource/loading.css b/public/resource/loading.css index b64f192..443a4f1 100644 --- a/public/resource/loading.css +++ b/public/resource/loading.css @@ -13,7 +13,7 @@ .loading-svg { width: 128px; height: 128px; - color: var(--primaryColor); + color: var(--primary-color); } .loading-spin__container { @@ -45,7 +45,7 @@ position: absolute; height: 16px; width: 16px; - background-color: var(--primaryColor); + background-color: var(--primary-color); border-radius: 8px; -webkit-animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; diff --git a/public/resource/loading.js b/public/resource/loading.js index 08b9ae5..92e8bf7 100644 --- a/public/resource/loading.js +++ b/public/resource/loading.js @@ -2,24 +2,24 @@ * 初始化加载效果的svg格式logo * @param {string} id - 元素id */ -function initSvgLogo(id) { - const svgStr = ``; - const appEl = document.querySelector(id); - const div = document.createElement('div'); - div.innerHTML = svgStr; + function initSvgLogo(id) { + const svgStr = `` + const appEl = document.querySelector(id) + const div = document.createElement('div') + div.innerHTML = svgStr if (appEl) { - appEl.appendChild(div); + appEl.appendChild(div) } } function addThemeColorCssVars() { - const key = '__THEME_COLOR__' - const defaultColor = '#316c72'; - const themeColor = window.localStorage.getItem(key) || defaultColor; - const cssVars = `--primaryColor: ${themeColor}`; - document.documentElement.style.cssText = cssVars; + const key = '__THEME_COLOR__' + const defaultColor = '#316c72' + const themeColor = window.localStorage.getItem(key) || defaultColor + const cssVars = `--primary-color: ${themeColor}` + document.documentElement.style.cssText = cssVars } -addThemeColorCssVars(); +addThemeColorCssVars() -initSvgLogo('#loadingLogo'); +initSvgLogo('#loadingLogo') diff --git a/settings/index.js b/settings/index.js new file mode 100644 index 0000000..1957e86 --- /dev/null +++ b/settings/index.js @@ -0,0 +1,2 @@ +export * from './theme.json' +export * from './proxy-config' diff --git a/settings/proxy-config.js b/settings/proxy-config.js new file mode 100644 index 0000000..f65738b --- /dev/null +++ b/settings/proxy-config.js @@ -0,0 +1,18 @@ +const proxyConfigMappings = { + dev: { + prefix: '/api', + target: 'http://localhost:8080', + }, + test: { + prefix: '/api', + target: 'http://localhost:8080', + }, + prod: { + prefix: '/api', + target: 'http://localhost:8080', + }, +} + +export function getProxyConfig(envType = 'dev') { + return proxyConfigMappings[envType] +} diff --git a/src/settings/theme.json b/settings/theme.json similarity index 100% rename from src/settings/theme.json rename to settings/theme.json index 974896d..cba737a 100644 --- a/src/settings/theme.json +++ b/settings/theme.json @@ -1,11 +1,11 @@ { + "header": { + "height": 60 + }, "tags": { "visible": true, "height": 50 }, - "header": { - "height": 60 - }, "naiveThemeOverrides": { "common": { "primaryColor": "#316C72FF", diff --git a/src/components/common/AppProvider.vue b/src/components/common/AppProvider.vue index 5bf77ed..718b0b7 100644 --- a/src/components/common/AppProvider.vue +++ b/src/components/common/AppProvider.vue @@ -1,5 +1,5 @@