diff --git a/.env.production b/.env.production index 0a1e43e..ba986b4 100644 --- a/.env.production +++ b/.env.production @@ -2,7 +2,7 @@ VITE_ENV = 'production' VITE_OUTPUT_DIR = 'dist' # public path -VITE_PUBLIC_PATH = / +VITE_PUBLIC_PATH = /dazhuanpan # Whether to open mock VITE_USE_MOCK = true diff --git a/build/utils.js b/build/utils.js new file mode 100644 index 0000000..8bea70e --- /dev/null +++ b/build/utils.js @@ -0,0 +1,43 @@ +import fs from 'fs' +import path from 'path' + +// 移除未使用的导入 +/** + * 是否是 dev 环境 + * @export + * @param {string} mode + * @return {boolean} + */ +export function isDevFn(mode) { + return mode === 'development'; +} + +/** + * 是否是 prod 环境 + * @export + * @param {string} mode + * @return {boolean} + */ +export function isProdFn(mode) { + return mode === 'production'; +} + +/** + * Read all environment variable configuration files to process.env + */ +export function wrapperEnv(envConf) { + const ret = {}; + + for (const envName of Object.keys(envConf)) { + let realName = envConf[envName].replace(/\\n/g, '\n'); + realName = realName === 'true' ? true : realName === 'false' ? false : realName; + + ret[envName] = realName; + if (typeof realName === 'string') { + process.env[envName] = realName; + } else if (typeof realName === 'object') { + process.env[envName] = JSON.stringify(realName); + } + } + return ret; +} diff --git a/build/vite/build.js b/build/vite/build.js new file mode 100644 index 0000000..3894ee7 --- /dev/null +++ b/build/vite/build.js @@ -0,0 +1,44 @@ +export function createBuild(viteEnv) { + const { VITE_OUTPUT_DIR } = viteEnv; + return { + sourcemap: false, // 是否启用 + outDir: VITE_OUTPUT_DIR, + cssCodeSplit: true, // 禁用 CSS 代码拆分,将整个项目中的所有 CSS 将被提取到一个 CSS 文件中 + brotliSize: false, // 关闭打包计算 + target: 'esnext', + minify: 'terser', // 混淆器, terser 构建后文件体积更小, esbuild + // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项 + assetsInlineLimit: 4096, + chunkSizeWarningLimit: 2000, // chunk 大小警告的限制（以 kbs 为单位） + assetsDir: 'static', // 静态资源目录 + // rollup 打包配置 + rollupOptions: { + output: { + chunkFileNames: 'static/js/[name]-[hash].js', + entryFileNames: 'static/js/[name]-[hash].js', + assetFileNames: (chunkInfo) => { + if (chunkInfo.name) { + const info = chunkInfo.name.split('.'); + let extType = info[info.length - 1]; + if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(chunkInfo.name)) { + extType = 'media'; + } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(chunkInfo.name)) { + extType = 'images'; + } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(chunkInfo.name)) { + extType = 'fonts'; + } + return `static/${extType}/[name]-[hash][extname]`; + } + return 'static/[ext]/[name]-[hash].[ext]'; + } + } + }, + // 压缩配置 + terserOptions: { + compress: { + drop_console: false, // 生产环境移除console + drop_debugger: true // 生产环境移除debugger + } + } + }; +} diff --git a/build/vite/plugin/autoImport.js b/build/vite/plugin/autoImport.js new file mode 100644 index 0000000..e6ce889 --- /dev/null +++ b/build/vite/plugin/autoImport.js @@ -0,0 +1,26 @@ +/** + * Introduces component library styles on demand. + * https://github.com/antfu/unplugin-auto-import + */ +import AutoImport from 'unplugin-auto-import/vite' + +export function configAutoImportPlugin() { + return AutoImport({ + include: [ + /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx + /\.vue$/, + /\.vue\?vue/, // .vue + /\.md$/ // .md + ], + imports: ['vue', 'vue-router', '@vueuse/core'], + // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts' + dts: 'src/auto-import.d.ts', + // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals + // 生成全局声明文件，给eslint用 + eslintrc: { + enabled: true, // Default `false` + filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json` + globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable') + } + }) +} diff --git a/build/vite/plugin/autocomponents.js b/build/vite/plugin/autocomponents.js new file mode 100644 index 0000000..96c3763 --- /dev/null +++ b/build/vite/plugin/autocomponents.js @@ -0,0 +1,21 @@ +/** + * Introduces component library styles on demand. + * https://github.com/antfu/unplugin-vue-components + */ +import Components from 'unplugin-vue-components/vite' +import ViteComponents, { VantResolver } from 'unplugin-vue-components/resolvers' + +export function configAutoComponentsPlugin() { + return Components({ + // 指定组件位置，默认是src/components + dirs: ['src/components'], + extensions: ['vue', 'tsx'], + // 配置文件生成位置 + dts: 'src/components.d.ts', + // 搜索子目录 + deep: true, + // 允许子目录作为组件的命名空间前缀。 + directoryAsNamespace: false + // include:[] + }) +} diff --git a/build/vite/plugin/compress.js b/build/vite/plugin/compress.js new file mode 100644 index 0000000..87f7e8c --- /dev/null +++ b/build/vite/plugin/compress.js @@ -0,0 +1,34 @@ +/** + * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated + * https://github.com/anncwb/vite-plugin-compression + */ +import compressPlugin from 'vite-plugin-compression' + +export function configCompressPlugin( + compress, + deleteOriginFile = false +) { + const compressList = compress.split(',') + + const plugins = [] + + if (compressList.includes('gzip')) { + plugins.push( + compressPlugin({ + ext: '.gz', + deleteOriginFile + }) + ) + } + + if (compressList.includes('brotli')) { + plugins.push( + compressPlugin({ + ext: '.br', + algorithm: 'brotliCompress', + deleteOriginFile + }) + ) + } + return plugins +} diff --git a/build/vite/plugin/index.js b/build/vite/plugin/index.js new file mode 100644 index 0000000..1b7c964 --- /dev/null +++ b/build/vite/plugin/index.js @@ -0,0 +1,37 @@ +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +// import { configMockPlugin } from './mock' +import { configAutoImportPlugin } from './autoImport' +import { configAutoComponentsPlugin } from './autocomponents' +import { configCompressPlugin } from './compress' + +export function createVitePlugins(viteEnv, isBuild) { + const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv + + const vitePlugins = [ + // have to + vue(), + // have to + vueJsx({ + // include: /\.(jsx|tsx)/ + }) + ] + + // unplugin-vue-components + vitePlugins.push(configAutoComponentsPlugin()) + + // unplugin-auto-import + vitePlugins.push(configAutoImportPlugin()) + + // // vite-plugin-mock + // VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild)) + + // The following plugins only work in the production environment + if (isBuild) { + // rollup-plugin-gzip + vitePlugins.push( + configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE) + ) + } + return vitePlugins +} diff --git a/build/vite/plugin/mock.js b/build/vite/plugin/mock.js new file mode 100644 index 0000000..c2bec42 --- /dev/null +++ b/build/vite/plugin/mock.js @@ -0,0 +1,19 @@ +/** + * Mock plugin for development and production. + * https://github.com/anncwb/vite-plugin-mock + */ +// import { viteMockServe } from 'vite-plugin-mock' + +// export function configMockPlugin(isBuild: boolean) { +// return viteMockServe({ +// ignore: /^_/, +// mockPath: 'mock', +// localEnabled: !isBuild, +// prodEnabled: isBuild, +// injectCode: ` +// import { setupProdMockServer } from '../mock/_createProductionServer'; +// setupProdMockServer(); +// ` +// }) +// } +export {} diff --git a/build/vite/proxy.js b/build/vite/proxy.js new file mode 100644 index 0000000..a2eb629 --- /dev/null +++ b/build/vite/proxy.js @@ -0,0 +1,43 @@ +/** + * Generate proxy + * @param list + */ + +export function createProxy() { + return { + // 字符串简写写法 + // '/foo': 'http://localhost:4567', + // 选项写法 + // '/api': { + // target: process .env.VITE_APP_API_BASE_URL || 'http://192.168.8.93:3001', + // changeOrigin: true, + // rewrite: (path) => path.replace(/^\/api/, '') + // }, + // // 全球指数 + // '/hcm': { + // target: process.env.VITE_APP_API_BASE_URL_HCM || 'http://192.168.8.93:3001', + // changeOrigin: true, + // rewrite: (path) => path.replace(/^\/hcm/, '') + // }, + // // 时空预测 + // '/pre': { + // target: process.env.VITE_APP_API_BASE_URL_AI || 'http://192.168.8.93:3001', + // changeOrigin: true, + // rewrite: (path) => path.replace(/^\/pre/, '') + // } + // 正则表达式写法 + // '^/fallback/.*': { + // target: 'http://jsonplaceholder.typicode.com', + // changeOrigin: true, + // rewrite: (path) => path.replace(/^\/fallback/, '') + // } + // 使用 proxy 实例 + // "/api": { + // target: "http://jsonplaceholder.typicode.com", + // changeOrigin: true, + // configure: (proxy, options) => { + // // proxy 是 'http-proxy' 的实例 + // }, + // }, + } +} diff --git a/src/style.css b/src/style.css index f691315..b30313a 100644 --- a/src/style.css +++ b/src/style.css @@ -33,6 +33,7 @@ body { h1 { font-size: 3.2em; line-height: 1.1; + margin: 0; } button { @@ -58,12 +59,6 @@ button:focus-visible { padding: 2em; } -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} @media (prefers-color-scheme: light) { :root { diff --git a/src/views/DZP1.vue b/src/views/DZP1.vue index be0b308..8afa776 100644 --- a/src/views/DZP1.vue +++ b/src/views/DZP1.vue @@ -1,6 +1,6 @@