vue项目打包成web后再用hbuild打包成app

原创

已于 2024-12-22 14:34:06 修改 · 465 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2024-12-21 21:27:40 首次发布

vite 打包生成的文件如果直接放在服务器中是可以正常访问的，但是本地直接访问打包生成index.html文件就会提示以下问题。访问的文件不存在，主要是因为路径配置问题。提示跨域问题，不支持files协议，主要是因为esModule问题。

解决方法：

问题1：解决：在vite.config.js文件中配置主要：打包静态文件必须是根路径，否则放到服务器找不到静态资源（同理于webpack中的publicPath 的配置），只要加上这上步，后面就可以放到服务器的二级目录了，比如：https://www.xxx.com/xxx/，这样就可以直接访问了

export default defineConfig({

...

base: "./",// 设置为相对路径，确保本地打开文件时能找到资源，只要加上这上步，后面就可以放到服务器的二级目录了，比如：https://www.xxx.com/xxx/，这样就可以直接访问了

...

})

验证路径是否正常看浏览器中的network看文件是否加载正常，上面的代码所在位置：

2.解决 ES Module 跨域问题（这一步不要加，加上就错了，我一开始安这个方法来执行的，加上这个插件，打包后，在模拟器上可以运行，但是在手机上就闪一下界面，然后就白屏了，然后多方调试，反这个插件去掉了，就可以运行了，其实就是两步，一个是第一步，改成相对路径，第二步就是改成hash模式，就可以了）

Vite 在打包时默认启用了 <