diff --git a/biji-qianduan/index.html b/biji-qianduan/index.html index 5adda7b..37b0b63 100644 --- a/biji-qianduan/index.html +++ b/biji-qianduan/index.html @@ -28,6 +28,6 @@
- + diff --git a/biji-qianduan/server-config.md b/biji-qianduan/server-config.md new file mode 100644 index 0000000..d5213bb --- /dev/null +++ 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 + + Header set Content-Type "application/javascript" + + +# 或者在 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 类型 \ No newline at end of file diff --git a/biji-qianduan/vite.config.js b/biji-qianduan/vite.config.js index 2311104..f1278a3 100644 --- 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 } } }) \ No newline at end of file