fix(部署): 移除模块类型并添加服务器配置指南
解决模块加载错误问题，移除index.html中script的type="module"属性 添加server-config.md详细说明服务器MIME类型配置 优化vite构建配置，添加代码分割和输出格式设置
This commit is contained in:
ikmkj
@@ -28,6 +28,6 @@
|
|||||||
</style>
|
</style>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
82
biji-qianduan/server-config.md
Normal file
82
biji-qianduan/server-config.md
Normal file
@@ -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 类型
|
||||||
@@ -25,10 +25,46 @@ export default defineConfig(({ mode }) => {
|
|||||||
build: {
|
build: {
|
||||||
outDir: 'dist',
|
outDir: 'dist',
|
||||||
assetsDir: 'assets',
|
assetsDir: 'assets',
|
||||||
minify: 'esbuild',
|
rollupOptions: {
|
||||||
esbuild: {
|
output: {
|
||||||
drop: ['console', 'debugger'],
|
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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
Reference in New Issue
Block a user