Vue3+Vite项目开发构建与Vue DevTools配置问题求助

我最近把一个Vue3项目从Vue CLI迁移到了Vite，现在生产环境出现了特定问题，但Chrome DevTools控制台完全没报错。想通过Vue DevTools检查组件——这在其他项目里试过好多次都没问题，但这次就是用不了。

我加了个buildDev脚本，想用development模式执行vite build，Vite显示正在构建开发版本，但构建出来的结果和生产构建完全一样。怀疑迁移过程有问题，同时想在生产构建里强制启用DevTools，但没找到可行的方法。

项目用了Tailwind+PostCSS和Vuetify，以下是我的配置文件：

package.json #

{
  "name": "tour-app",
  "version": "0.2.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "buildDev": "vite --mode development build"
  },
  "files": [
    "dist/*.js"
  ],
  "dependencies": {
    "@mdi/font": "5.9.55",
    "@vuelidate/core": "^2.0.0-alpha.44",
    "@vuelidate/validators": "^2.0.0-alpha.31",
    "@vueuse/core": "^9.6.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.1.3",
    "pinia": "^2.0.16",
    "pinia-plugin-persistedstate": "^2.1.1",
    "roboto-fontface": "*",
    "vue": "^3.0.0",
    "vue-axios": "^3.4.1",
    "vue-recaptcha-v3": "^2.0.1",
    "vue-router": "^4.0.13",
    "vue-types": "^5.0.2",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@types/webfontloader": "^1.0.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "autoprefixer": "^10",
    "eslint": "^7.0.0",
    "json-server": "^0.17.0",
    "postcss": "^8",
    "tailwindcss": "^3",
    "vite": "^5.2.11",
    "vite-plugin-vuetify": "^2.0.3",
    "vuetify": "^3.6.7"
  }
}

执行buildDev脚本的输出 #

> tour-app@0.2.0 build
> vite build --mode development

vite v5.2.11 building for development...
✓ 409 modules transformed.
dist/index.html                                                            0.89 kB │ gzip:   0.48 kB
dist/.vite/manifest.json                                                   1.44 kB │ gzip:   0.26 kB
dist/booking/assets/PAP.TourBooking.materialdesignicons-webfont.woff2    325.24 kB
dist/booking/assets/PAP.TourBooking.materialdesignicons-webfont.woff     465.19 kB
dist/booking/assets/PAP.TourBooking.materialdesignicons-webfont.ttf    1,026.18 kB
dist/booking/assets/PAP.TourBooking.materialdesignicons-webfont.eot    1,026.40 kB
dist/booking/assets/PAP.TourBooking.index.css                            965.51 kB │ gzip: 134.87 kB
dist/booking/assets/PAP.TourBooking.index.js                             593.62 kB │ gzip: 195.71 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 3.30s

vite.config.js #

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';
import { fileURLToPath } from 'url';
import path from 'path';

const filename = fileURLToPath(import.meta.url);
const pathSegments = path.dirname(filename);

export default defineConfig({
  plugins: [vue(),
  vuetify({
    autoImport: { labs: true }
  })],
  //   server:{
  //     proxy:{
  //       '/api': 'http://localhost:55032',
  //     }
  //   },
  resolve: {
    alias: {
      '@': path.resolve(pathSegments, './src'),
      vue: "vue/dist/vue.esm-bundler.js",
      mainFields: [
        'browser',
        'module',
        'main',
        'jsnext:main',
        'jsnext'
      ]
    },
    extensions: ['.mjs', '.js', '.ts', '.json'],
  },
  build: {
    minify: true,
    manifest: true,
    outDir: "dist",
    rollupOptions: {
      output: {

        entryFileNames: "booking/assets/PAP.TourBooking.[name].js",
        assetFileNames: "booking/assets/PAP.TourBooking.[name][extname]",
      }
    },
  }
})

内容的提问来源于stack exchange，提问作者Geekmard