fix(部署): 移除模块类型并添加服务器配置指南

解决模块加载错误问题，移除index.html中script的type="module"属性添加server-config.md详细说明服务器MIME类型配置优化vite构建配置，添加代码分割和输出格式设置
2026-03-01 18:22:07 +08:00
parent 39bb93cc2f
commit c9c21df0f0
3 changed files with 122 additions and 4 deletions
--- a/biji-qianduan/index.html
+++ b/biji-qianduan/index.html
@@ -28,6 +28,6 @@
  </style>
  <body>
    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script src="/src/main.js"></script>
  </body>
 </html>
--- a/biji-qianduan/server-config.md
+++ b/biji-qianduan/server-config.md
@@ -0,0 +1,82 @@
+# 部署服务器配置指南
+
+## 问题描述
+
+在部署前端项目后，出现以下错误：
+
+```
+Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "application/octet-stream".
+```
+
+## 解决方案
+
+此问题是由于服务器未正确配置 JavaScript 文件的 MIME 类型导致的。请按照以下步骤配置您的服务器：
+
+### Nginx 配置
+
+在 nginx.conf 或站点配置文件中添加：
+
+```nginx
+location ~ \.js$ {
+    add_header Content-Type application/javascript;
+}
+
+# 或者更完整的静态资源配置
+location ~* \.(js|css)$ {
+    expires 1y;
+    add_header Cache-Control "public, immutable";
+    add_header Content-Type $mimetype;
+}
+```
+
+### Apache 配置
+
+在 `.htaccess` 文件中添加：
+
+```apache
+<FilesMatch "\.js$">
+    Header set Content-Type "application/javascript"
+</FilesMatch>
+
+# 或者在 httpd.conf 中
+AddType application/javascript .js
+```
+
+### Caddy 配置
+
+在 Caddyfile 中添加：
+
+```
+@jsFiles {
+    path *.js
+}
+header @jsFiles Content-Type application/javascript
+```
+
+### 其他服务器
+
+确保您的服务器软件正确配置了以下 MIME 类型：
+
+- `.js` 文件: `application/javascript`
+- `.css` 文件: `text/css`
+- `.json` 文件: `application/json`
+
+## Vite 构建配置
+
+当前项目已配置了适当的代码分割，请使用以下命令构建：
+
+```bash
+npm run build
+```
+
+或
+
+```bash
+npm run build --mode production
+```
+
+## 注意事项
+
+1. IIFE 格式会将代码打包成立即执行函数，在某些现代浏览器中可能不需要 `type="module"`
+2. 确保服务器支持静态资源的正确 MIME 类型
+3. 如果使用 CDN，请确保 CDN 也正确配置了 MIME 类型
--- a/biji-qianduan/vite.config.js
+++ b/biji-qianduan/vite.config.js
@@ -25,10 +25,46 @@ export default defineConfig(({ mode }) => {
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
-    minify: 'esbuild',
-    esbuild: {
-      drop: ['console', 'debugger'],
+    rollupOptions: {
+      output: {
+        format: 'es',
+        manualChunks: {
+          // Vue核心库
+          vue: ['vue', 'pinia'],
+          // UI组件库
+          elementPlus: ['element-plus'],
+          // Markdown编辑器相关
+          markdownEditor: ['@kangc/v-md-editor', 'vditor'],
+          // PDF生成工具
+          pdfTools: ['jspdf', 'html2canvas'],
+          // 代码高亮
+          highlight: ['highlight.js'],
+          // 代码编辑器
+          codemirror: ['codemirror'],
+          // Pinia状态管理
+          piniaPlugin: ['pinia-plugin-persistedstate']
+        },
+        chunkFileNames: (chunkInfo) => {
+          const facadeModuleId = chunkInfo.facadeModuleId || chunkInfo.moduleIds[0]
+          if (facadeModuleId.includes('node_modules')) {
+            return 'assets/js/vendor/[name]-[hash].js'
+          }
+          return 'assets/js/[name]-[hash].js'
+        },
+        entryFileNames: 'assets/js/[name]-[hash].js',
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name.endsWith('.css')) {
+            return 'assets/css/[name]-[hash].[ext]';
+          }
+          if (assetInfo.name.endsWith('.js')) {
+            return 'assets/js/[name]-[hash].[ext]';
+          }
+          return 'assets/[name]-[hash].[ext]';
+        },
+      },
    },
+    sourcemap: false,
+    chunkSizeWarningLimit: 1000 // 设置为1MB
  }
 }
 })