vite.config.js中如何配置

### Vite 配置解决 Vue3 打包后本地访问 dist 文件 CORS 错误 Vite 是一种现代化前端构建工具，它提供了更快的开发体验以及灵活的配置能力。针对 Vue3 项目打包后的 CORS 问题，在 `vite.config.js` 中可以通过多种方式进行优化和调整。 #### 方法一：设置 `base` 参数 在 Vite 的配置文件中，有一个重要的参数叫做 `base`，用于指定生产环境下静态资源的基础路径。如果未正确配置此参数，可能导致生成的资源链接无法正常解析，进而引发 CORS 问题[^1]。 为了确保所有资源都能被正确加载，建议将 `base` 设置为 `'./'` 或者留空（视实际需求而定）。这样可以让浏览器从当前 HTML 文件所在的目录下查找对应的静态资源。 ```javascript // vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], base: './', // 将基础路径设置为相对路径 }); ``` #### 方法二：启用 HTTPS 模式 有时，CORS 问题是由于 HTTP 和 HTTPS 协议之间的差异引起的。尽管直接打开本地文件并不涉及真正的网络传输，但某些安全机制仍然会将其视为潜在风险。因此，切换到 HTTPS 可能有助于绕过这些问题[^2]。 虽然在纯静态环境中实现完整的 SSL/TLS 支持较为复杂，但在开发阶段可以借助自签名证书简单模拟这一场景。Vite 自身也支持通过 CLI 参数轻松开启加密连接： ```bash vite --https true ``` 当然，这种方法更适合调试用途而非长期解决方案。 #### 方法三：集成小型内置服务器 正如前面提到过的那样，单纯依靠文件系统的 URI 访问容易触犯现代浏览器的安全规定。所以最稳妥的办法还是建立一个临时性的 Web Server 来承载我们的应用程序实例。幸运的是，Vite 内嵌了一个功能强大的 Express-like API 接口，允许开发者自行定制服务行为[^3]。 下面是一个例子展示如何扩展默认的服务逻辑以便更好地适应特定场合下的需要： ```javascript // vite.config.js import { fileURLToPath, URL } from 'node:url'; import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; const __filename = fileURLToPath(import.meta.url); const __dirname = new URL('.', import.meta.url).pathname; export default defineConfig({ plugins: [vue()], server: { fs: { allow: ['..'], // 允许访问上级目录结构 }, middlewareMode: true, watch: { usePolling: true, interval: 100, } }, preview: { port: 5000, strictPort: true, }, }); ``` 上述代码片段定义了一些额外的功能特性，比如放宽文件系统权限约束、强制固定预览端口号等等。其中特别值得注意的部分是关于 `server.middlewareMode` 的设定——激活之后能够显著改善跨域兼容表现。 --- ### 总结 综上所述，面对由 CORS 引发的各种挑战时，可以从以下几个角度出发寻找对策： - 修改 `vite.config.js` 中的 `base` 字段指向合适的值； - 利用 HTTPS 加密手段降低敏感度； - 结合 Vite 提供的强大插件体系架构打造专属的小型服务器环境。 每种方案都有各自适用范围及局限性，请根据实际情况合理选用最佳实践组合。