一、问题描述 项目build之后,点击dist文件中的index.html文件,打开是空白,提示以下信息。 二、产生原因及解决方法 1.文件路径不对 vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置 2.跨域问题 vite构建打包后,默认启用ES Module,跨module加载引用涉及跨域,file://…...
在vite+vue3项目中,执行build打包后生成index.html文件,【本地打开】或【线上服务器部署后】,页面空白且浏览器控制台很多报错,vue3使用vite进行打包构建后,在本地以file文件系统的方式,浏览器直接打开打包生成后的dist目录下的index.html文件访问,浏览器页面整页空白不显示且打开控制台后有报错,该路径找不到对应的...
Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面,这个index就是最后单页面的最终文件。 问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由。 这样的话页面就是空白了,因为没有组件被添加到页面中。打...
可以尝试在本地服务器上运行打包后的文件,以排除文件路径或权限问题。 浏览器兼容性: 如果你的应用需要在低版本浏览器中运行,确保打包配置中包含了必要的兼容性插件或Polyfill。 例如,在Vite配置中添加legacyPlugin来支持旧版浏览器。 通过以上步骤,你应该能够定位并解决Vue3项目打包后打开空白的问题。如果问题仍然存...
1.新建一个.babelrc 文件 代码语言:javascript 复制 {"presets":["@babel/preset-env"],"plugins":["@babel/plugin-transform-runtime"]} 2.在vite.config,ts 文件修改配置新增 esbuild 和build项( 需要intall terser 代码语言:javascript 复制 importesbuildfrom'rollup-plugin-esbuild'exportdefaultdefineConfig...
build: { assetsPublicPath: './', } 1. 2. 3. 4,升级vue2+部分手机访问出现页面空白 npm run dev后可能出现无法加载到路由模板的信息。 解决位置:config/index.js文件:把 devtool: '#eval-source-map' 改为devtool:'inline-source-map' 5,升级vue2+IP访问页面空白 ...
回到代码发现是我在使用Vuex的数据时按照往常习惯在前面加了this,我把this去掉重新npm run build打包,再打开npm run preview本地测试,错误就没了,页面也正常显示了。 修改前: 修改后: 二、配置Gitee Pages 在vite.config.js 中设置正确的 base。 如果你要部署在https://<USERNAME>.gitee.io/上 ...
vite + vue3 +ts 打包后路由无法访问空白? a2774206 1.8k32853 发布于 2023-06-06 北京 访问路由空白无效果无报错;dev开发模式没问题,只存在build后通过服务打开页面存在问题。通过调试问题出在beforeEach代码: router.beforeEach((to, from, next) => { const store = useStore(); const { token } = ...
前言:vue项目打包后点击index.html文件时常时空白页面,vue2在配置文件配置后再点击时可以显示页面的,但vue3点击后是看不到页面的,暂时没找到解决方法,不过直接部署到nginx服务器再访问是可以访问到的, 路由文件的配置 vite文件配置base路径 npm run build打包后放到nginx服务器 然后访问即可 若是云服务器,也是同样的...