Vue 3 - Vite 应用程序在构建后缺少一些 CSS 规则
Lar*_*Dev 5 css build sass vue.js vite
所以，我一直在努力解决这个问题，花了很长时间为我的应用程序进行重大更新，一切都运行顺利并且开发良好，但是一旦我为生产构建了一些 CSS 规则就丢失了，一些元素不正常，颜色没有按应有的方式显示，并且 Flexbox 似乎关闭了......
\n那么让我从头开始：
\n环境：
\n- \n
- 维特2.6.11 \n
- 版本 3.2.20 \n
- 参考糖\n \n
- Firebase 托管 \n
这是我的依赖项
\n "dependencies": {\n "@ckeditor/ckeditor5-build-classic": "30.0.0",\n "@ckeditor/ckeditor5-vue": "2.0.1",\n "@hennge/vue3-pagination": "^1.0.17",\n "@iconify/iconify": "2.0.4",\n "@mapbox/mapbox-gl-geocoder": "4.7.4",\n "@popperjs/core": "2.10.2",\n "@vueform/multiselect": "2.2.0",\n "@vueform/slider": "2.0.5",\n "@vuelidate/core": "^2.0.0-alpha.21",\n "@vuelidate/validators": "^2.0.0-alpha.18",\n "@vueuse/core": "6.7.3",\n "@vueuse/head": "0.6.0",\n "animate.css": "^4.1.1",\n "ant-design-vue": "^2.2.8",\n "apexcharts": "3.28.3",\n "axios": "0.22.0",\n "billboard.js": "3.1.5",\n "bulma": "0.9.3",\n "bulma-css-vars": "0.7.0",\n "dayjs": "1.10.7",\n "dragula": "3.7.3",\n "dropzone": "5.9.3",\n "filepond": "4.30.3",\n "filepond-plugin-file-validate-size": "2.2.5",\n "filepond-plugin-file-validate-type": "1.2.6",\n "filepond-plugin-image-crop": "2.0.6",\n "filepond-plugin-image-edit": "1.6.3",\n "filepond-plugin-image-exif-orientation": "1.0.11",\n "filepond-plugin-image-preview": "4.6.10",\n "filepond-plugin-image-resize": "2.0.10",\n "filepond-plugin-image-transform": "3.8.7",\n "firebase": "9.1.3",\n "flag-icon-css": "^3.5.0",\n "imask": "6.2.2",\n "mapbox-gl": "2.5.0",\n "markdown-it-emoji": "2.0.0",\n "notyf": "3.10.0",\n "nprogress": "0.2.0",\n "photoswipe": "4.1.3",\n "pinia": "^2.0.0-rc.15",\n "pinia-plugin-persist": "^0.0.92",\n "qrcode-vue3": "^1.4.17",\n "simple-datatables": "3.1.2",\n "simplebar": "6.0.0-beta.10",\n "simplebar-vue": "2.0.0-beta.10",\n "stylelint-csstree-validator": "^1.9.0",\n "sweetalert2": "^10.16.7",\n "tiny-slider": "2.9.3",\n "tippy.js": "6.3.2",\n "tslib": "2.3.1",\n "v-calendar": "3.0.0-alpha.5",\n "v-offline": "^3.0.0",\n "vant": "^3.2.6",\n "vee-validate": "4.5.4",\n "vivus": "0.4.6",\n "vue": "3.2.20",\n "vue-accessible-color-picker": "3.0.0",\n "vue-currency-input": "^2.0.1",\n "vue-i18n": "9.2.0-beta.15",\n "vue-router": "4.0.12",\n "vue-scrollto": "2.20.0",\n "vue-stripe-menu": "^2.1.1",\n "vue-tippy": "6.0.0-alpha.33",\n "vue-toastification": "^2.0.0-rc.1",\n "vue3-apexcharts": "1.4.1",\n "vue3-burger-menu": "^1.1.1",\n "vue3-carousel": "^0.1.28",\n "vue3-clipboard": "^1.0.0",\n "vueperslides": "^3.3.2",\n "xlsx": "^0.17.3",\n "yup": "0.32.9"\n },\n "devDependencies": {\n "@commitlint/cli": "13.2.0",\n "@commitlint/config-conventional": "13.2.0",\n "@commitlint/prompt-cli": "13.2.0",\n "@iconify/json": "1.1.410",\n "@intlify/vite-plugin-vue-i18n": "2.4.0",\n "@types/dragula": "3.7.1",\n "@types/luxon": "^1.27.1",\n "@types/mapbox-gl": "2.4.2",\n "@types/mapbox__mapbox-gl-geocoder": "4.7.1",\n "@types/markdown-it": "12.2.1",\n "@types/node": "16.10.2",\n "@types/nprogress": "0.2.0",\n "@types/photoswipe": "4.1.2",\n "@types/prismjs": "1.16.6",\n "@types/simplebar": "5.3.3",\n "@types/vivus": "0.4.4",\n "@typescript-eslint/eslint-plugin": "4.33.0",\n "@typescript-eslint/parser": "4.33.0",\n "@vitejs/plugin-vue": "1.9.3",\n "@vue/compiler-sfc": "3.2.20",\n "autoprefixer": "9.8.6",\n "commitlint": "13.2.0",\n "cross-env": "7.0.3",\n "cypress": "8.5.0",\n "eslint": "7.32.0",\n "eslint-config-prettier": "8.3.0",\n "eslint-plugin-md": "1.0.19",\n "eslint-plugin-vue": "7.19.0",\n "eslint-plugin-vuejs-accessibility": "^0.7.1",\n "gray-matter": "4.0.3",\n "lint-staged": "11.2.0",\n "markdown-it": "12.2.0",\n "markdown-it-anchor": "8.3.1",\n "npm-run-all": "4.1.5",\n "path": "^0.12.7",\n "plyr": "3.6.8",\n "postcss-nested": "4.2.3",\n "prettier": "2.4.1",\n "prismjs": "1.25.0",\n "rimraf": "3.0.2",\n "rollup": "2.58.3",\n "rollup-plugin-purgecss": "^4.0.3",\n "sass": "1.32.13",\n "standard-version": "9.3.2",\n "stylelint": "13.13.1",\n "stylelint-config-prettier": "8.0.2",\n "stylelint-config-standard": "22.0.0",\n "stylelint-scss": "3.21.0",\n "typescript": "4.4.3",\n "unplugin-vue-components": "0.16.0",\n "vfonts": "^0.1.0",\n "vite": "2.6.11",\n "vite-imagetools": "3.6.8",\n "vite-plugin-fonts": "0.2.2",\n "vite-plugin-imagemin": "0.4.6",\n "vite-plugin-pages": "0.18.1",\n "vite-plugin-purge-icons": "0.7.0",\n "vite-plugin-pwa": "0.11.3",\n "vite-plugin-radar": "0.2.0",\n "vite-svg-loader": "^2.2.0",\n "vue-tsc": "0.3.0",\n "yorkie": "2.0.0"\n }\n这是我的 vite.config.ts
\nimport { defineConfig } from \'vite\'\n// @ts-ignore\nimport path from \'path\'\nimport Vue from \'@vitejs/plugin-vue\'\nimport Pages from \'vite-plugin-pages\'\nimport Components from \'unplugin-vue-components/vite\'\nimport ViteFonts from \'vite-plugin-fonts\'\nimport ViteRadar from \'vite-plugin-radar\'\nimport PurgeIcons from \'vite-plugin-purge-icons\'\nimport { imagetools } from \'vite-imagetools\'\nimport ImageMin from \'vite-plugin-imagemin\'\nimport { vueI18n } from \'@intlify/vite-plugin-vue-i18n\'\nimport { VitePWA } from \'vite-plugin-pwa\'\nimport purgecss from \'rollup-plugin-purgecss\'\nimport ViteComponents, {\n AntDesignVueResolver,\n VantResolver\n} from \'unplugin-vue-components/resolvers\'\n\nconst SILENT = Boolean(process.env.SILENT) ?? false\nconst SOURCE_MAP = Boolean(process.env.SOURCE_MAP) ?? false\n\n/**\n * This is the main configuration file for vitejs\n *\n * @see https://vitejs.dev/config\n */\nexport default defineConfig({\n // Project root directory (where index.html is located).\n root: process.cwd(),\n // Base public path when served in development or production.\n // You also need to add this base like `history: createWebHistory(\'my-subdirectory\')`\n // in ./src/router.ts\n // base: \'/my-subdirectory/\',\n base: \'/\',\n // Directory to serve as plain static assets.\n publicDir: \'public\',\n // Adjust console output verbosity.\n logLevel: SILENT ? \'error\' : \'info\',\n /**\n * By default, Vite will crawl your index.html to detect dependencies that\n * need to be pre-bundled. If build.rollupOptions.input is specified,\n * Vite will crawl those entry points instead.\n *\n * @see https://vitejs.dev/config/#optimizedeps-entries\n */\n optimizeDeps: {\n include: [\n \'@ckeditor/ckeditor5-vue\',\n \'@ckeditor/ckeditor5-build-classic\',\n \'@iconify/iconify\',\n \'@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.min.js\',\n \'@vueuse/core\',\n \'@vueuse/head\',\n \'@vueform/multiselect\',\n \'@vueform/slider\',\n \'axios\',\n \'billboard.js\',\n \'dayjs\',\n \'dropzone\',\n \'dragula\',\n \'filepond\',\n \'filepond-plugin-file-validate-size\',\n \'filepond-plugin-file-validate-type\',\n \'filepond-plugin-image-exif-orientation\',\n \'filepond-plugin-image-crop\',\n \'filepond-plugin-image-edit\',\n \'filepond-plugin-image-preview\',\n \'filepond-plugin-image-resize\',\n \'filepond-plugin-image-transform\',\n \'imask\',\n \'nprogress\',\n \'notyf\',\n \'mapbox-gl\',\n \'photoswipe/dist/photoswipe\',\n \'photoswipe/dist/photoswipe-ui-default\',\n \'plyr\',\n \'v-calendar\',\n \'vee-validate\',\n \'vue\',\n \'vue-scrollto\',\n \'vue3-apexcharts\',\n \'vue-tippy\',\n \'simplebar\',\n \'simple-datatables\',\n \'tiny-slider/src/tiny-slider\',\n \'vue-accessible-color-picker\',\n \'yup\',\n \'ant-design-vue\',\n \'vant\'\n ],\n },\n // Will be passed to @rollup/plugin-alias as its entries option.\n resolve: {\n alias: [\n {\n find: \'/~/\',\n replacement: `/src/assets/`,\n },\n {\n find: \'/@src/\',\n replacement: `/src/`,\n },\n ],\n },\n\n build: {\n sourcemap: SOURCE_MAP,\n // Turning off brotliSize display can slightly reduce packaging time\n brotliSize: !SILENT,\n chunkSizeWarningLimit: 2000,\n minify: \'esbuild\',\n cssCodeSplit: true,\n },\n plugins: [\n /**\n * plugin-vue plugin inject vue library and allow sfc files to work (*.vue)\n *\n * @see https://github.com/vitejs/vite/tree/main/packages/plugin-vue\n */\n Vue({\n include: [/\\.vue$/],\n }),\n\n /**\n * vite-plugin-vue-i18n plugin does i18n resources pre-compilation / optimizations\n *\n * @see https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n\n */\n vueI18n({\n include: path.resolve(__dirname, \'./src/locales/**\'),\n }),\n\n /**\n * unplugin-vue-components plugin is responsible of autoloading components\n * documentation and md file are loaded for elements and components sections\n *\n * @see https://github.com/antfu/unplugin-vue-components\n */\n Components({\n dirs: [\'src/components\', \'src/layouts\', \'src/views\'],\n extensions: [\'vue\', \'md\'],\n dts: true,\n include: [/\\.vue$/, /\\.vue\\?vue/, /\\.md$/],\n resolvers: [\n AntDesignVueResolver(),\n VantResolver()\n ]\n }),\n\n /**\n * vite-plugin-purge-icons plugin is responsible of autoloading icones from multiples providers\n *\n * @see https://icones.netlify.app/\n * @see https://github.com/antfu/purge-icons/tree/main/packages/vite-plugin-purge-icons\n */\n PurgeIcons(),\n\n /**\n * vite-plugin-fonts plugin inject webfonts from differents providers\n *\n * @see https://github.com/stafyniaksacha/vite-plugin-fonts\n */\n ViteFonts({\n google: {\n families: [\n {\n name: \'Fira Code\',\n styles: \'wght@400;600\',\n },\n {\n name: \'Montserrat\',\n styles: \'wght@500;600;700;800;900\',\n },\n {\n name: \'Roboto\',\n styles: \'wght@300;400;500;600;700\',\n },\n ],\n },\n }),\n\n /**\n * vite-plugin-radar plugin inject snippets from analytics providers\n *\n * @see https://github.com/stafyniaksacha/vite-plugin-radar\n */\n ViteRadar({\n analytics: {\n id: \'\',\n },\n }),\n\n /**\n * vite-plugin-pwa generate manifest.json and register services worker to enable PWA\n *\n * @see https://github.com/antfu/vite-plugin-pwa\n */\n VitePWA({\n registerType: \'autoUpdate\',\n base: \'/\',\n includeAssets: [\n \'favicon.svg\',\n \'favicon.ico\',\n \'robots.txt\',\n \'apple-touch-icon.png\',\n ],\n manifest: {\n name: \'Treeb\xc5\xab Admin\',\n short_name: \'Treeb\xc5\xab Admin\',\n start_url: \'/?utm_source=pwa\',\n display: \'standalone\',\n theme_color: \'#ffffff\',\n background_color: \'#ffffff\',\n icons: [\n {\n src: \'pwa-192x192.png\',\n sizes: \'192x192\',\n type: \'image/png\',\n },\n {\n src: \'pwa-512x512.png\',\n sizes: \'512x512\',\n type: \'image/png\',\n },\n {\n src: \'pwa-512x512.png\',\n sizes: \'512x512\',\n type: \'image/png\',\n purpose: \'any maskable\',\n },\n ],\n },\n }),\n\n /**\n * rollup-plugin-purgecss plugin is responsible of purging css rules\n * that are not used in the bundle\n *\n * @see https://github.com/FullHuman/purgecss/tree/main/packages/rollup-plugin-purgecss\n */\n purgecss({\n content: [`./src/**/*.vue`],\n variables: false,\n safelist: {\n standard: [\n /(autv|lnil|lnir|fas?)/,\n /-(leave|enter|appear)(|-(to|from|active))$/,\n /^(?!(|.*?:)cursor-move).+-move$/,\n /^router-link(|-exact)-active$/,\n /data-v-.*/,\n ],\n },\n defaultExtractor(content) {\n const contentWithoutStyleBlocks = content.replace(\n /<style[^]+?<\\/style>/gi,\n \'\'\n )\n return (\n contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) ||\n []\n )\n },\n }),\n\n /**\n * vite-imagetools plugin allow to perform transformation (blur, resize, crop, etc)\n * on images at build time\n *\n * @see https://github.com/JonasKruckenberg/vite-imagetools\n */\n imagetools({\n silent: SILENT,\n }),\n\n /**\n * vite-plugin-imagemin optimize all images sizes from public or asset folder\n *\n * @see https://github.com/anncwb/vite-plugin-imagemin\n */\n ImageMin({\n verbose: !SILENT,\n gifsicle: {\n optimizationLevel: 7,\n interlaced: false,\n },\n optipng: {\n optimizationLevel: 7,\n },\n mozjpeg: {\n quality: 60,\n },\n pngquant: {\n quality: [0.8, 0.9],\n speed: 4,\n },\n svgo: {\n plugins: [\n {\n name: \'removeViewBox\',\n active: false,\n },\n {\n name: \'removeEmptyAttrs\',\n active: false,\n },\n ],\n },\n }),\n ],\n})\n这是我的index.html
\n<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <!--iOS configuration-->\n <meta name="apple-mobile-web-app-capable" content="yes">\n\n <meta name="google" content="notranslate">\n\n <!--ICONS-->\n <link rel="apple-touch-icon" href="/images/mobile-icons/ios/apple-icon.png">\n <link rel="apple-touch-icon" sizes="57x57" href="/images/mobile-icons/ios/apple-icon-57x57.png">\n <link rel="apple-touch-icon" sizes="60x60" href="/images/mobile-icons/ios/apple-icon-60x60.png">\n <link rel="apple-touch-icon" sizes="72x72" href="/images/mobile-icons/ios/apple-icon-72x72.png">\n <link rel="apple-touch-icon" sizes="76x76" href="/images/mobile-icons/ios/apple-icon-76x76.png">\n <link rel="apple-touch-icon" sizes="114x114" href="/images/mobile-icons/ios/apple-icon-114x114.png">\n <link rel="apple-touch-icon" sizes="120x120" href="/images/mobile-icons/ios/apple-icon-120x120.png">\n <link rel="apple-touch-icon" sizes="144x144" href="/images/mobile-icons/ios/apple-icon-144x144.png">\n <link rel="apple-touch-icon" sizes="152x152" href="/images/mobile-icons/ios/apple-icon-152x152.png">\n <link rel="apple-touch-icon" sizes="180x180" href="/images/mobile-icons/ios/apple-icon-180x180.png">\n\n <!-- Splashscreen-->\n <link href="/images/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />\n <link href="/images/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />\n <link href="/images/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />\n <link href="/images/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />\n <link href="/images/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />\n <link href="/images/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />\n <link href="/images/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />\n <link href="/images/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />\n <link href="/images/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />\n <link href="/images/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />\n\n <!--Status Bar-->\n <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">\n <meta name="theme-color" content="#2f3048">\n <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />\n <meta content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no, shrink-to-fit=no" name="viewport">\n <link\n rel="apple-toucv-icon"\n sizes="180x180"\n href="/icons/apple-touch-icon.png"\n />\n <link\n rel="icon"\n type="image/png"\n sizes="32x32"\n href="/icons/favicon-32x32.png"\n />\n <link\n rel="icon"\n type="image/png"\n sizes="16x16"\n href="/icons/favicon-16x16.png"\n />\n <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" />\n <meta name="msapplication-TileColor" content="#232326" />\n <!-- <meta name="theme-color" content="#ffffff" />-->\n <title>Treeb\xc5\xab Hotels</title>\n <script>\n /**\n * this is a hack for dragula used on KanbanApp\n *\n * @see src/components/pages/apps/KanbanApp.vue\n */\n var global = global || window\n </script>\n <link\n rel="preload"\n as="style"\n onload="this.rel=\'stylesheet\'"\n href="/vendors/font-awesome-v5.css"\n />\n <link\n rel="preload"\n as="style"\n onload="this.rel=\'stylesheet\'"\n href="/vendors/line-icons-pro.css"\n />\n <link\n rel="preload"\n as="style"\n onload="this.rel=\'stylesheet\'"\n href="/vendors/prism-coldark-cold.css"\n />\n </head>\n <body>\n <div data-teleport-bg></div>\n <div id="app" class="app-wrapper"></div>\n <script type="module" src="/src/styles.ts"></script>\n <script type="module" src="/src/main.ts"></script>\n </body>\n</html>\n请注意以下图像中开发版本和生产版本之间的差异：
\n开发版本：
\n
产品版本：\n
正如您所看到的，样式不匹配......让我们继续：
\n开发版本，flexbox 工作正常：\n
\n
产品版本中没有 Flexbox\n
