在使用vite进行一系列配置后，本地开发模式正常，结果部署上线发现白屏报错了，结果在本地打包运行后发现确实有问题 =_=||  经过排查还是vite 配置的问题，特此用文章记录下 ，方便以后规避相同错误

1.rollup external配置有误引发的 module "vue" ./ relative path not module

暂时解决，将external的配置先注释，直接进行打包 ，没有报错，但治标不治本，如果我就是想使用external 单独分离，记得 external配置的依赖 要用cdn引入 具体修改的配置如下：

2. 生产环境使用路由懒加载造成的无法找到文件从而无法进行跳转的问题

目前是都改成使用同步引入就能解决，更好的处理方式待进一步排查。。。

3.对于访问的接口路径，打包后可以先在本地起个服务，运行下看是不是自己预期的效果，我就是没有看，直接部上了生产，结果nginx 405报错，后来发现是接口路径生产环境配置的地址问题，可以直接用生产环境变量 控制 axios 的baseUrl 在配置时注意，production配置服务器的地址+代理的api 即可，然后会根据nginx 里 server_name 即服务器地址 ，和location配置的匹配代理的转发地址+端口 proxy_pass 

# vue.js # 前端 # javascript
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

移动端性能优化全攻略

在React Native等框架中，注意组件卸载时的资源清理，避免内存堆积。采用懒加载技术，优先加载首屏内容，延迟非关键资源，显著提升页面打开速度。对于实时性要求低的数据，可采用增量更新策略，降低数据传输量。通过以上多维度的优化，不仅能提升应用性能，还能增强用户留存率。性能优化是一个持续的过程，需结合数据分析工具（如Lighthouse）定期监测，才能实现最佳效果。**5. 耗电与发热控制****

avatar 开源鸿蒙跨平台开发者社区

React Native原理

在移动应用开发领域，React Native凭借“一次编写，多端运行”的特性成为开发者青睐的框架。其核心原理在于通过JavaScript与原生平台的桥梁，实现了高效渲染和性能优化。本文将深入剖析React Native的底层机制，揭示其如何平衡开发效率与原生体验。React Native的核心是基于JavaScriptCore引擎的通信架构。JavaScript代码通过“桥接层”与原生模块交互，将

avatar 开源鸿蒙跨平台开发者社区

移动端架构设计方法

面对Android与iOS的生态差异，跨平台方案（如Flutter、React Native）能节省开发成本，但需权衡性能与原生体验。架构设计时，可通过抽象平台接口（如网络请求、存储）实现核心逻辑复用，同时保留原生模块处理平台特性功能，确保体验一致性。移动端架构设计作为应用开发的核心环节，不仅需要应对碎片化设备、复杂网络环境等挑战，还需兼顾开发效率和维护成本。移动端性能优化需贯穿架构设计全程。无论

avatar 开源鸿蒙跨平台开发者社区