vue 项目打包后看不到页面内容

最新推荐文章于 2024-08-28 14:51:18 发布
原创 最新推荐文章于 2024-08-28 14:51:18 发布 · 6.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue打包后路径不对

本文介绍了Vue项目中遇到的常见问题——打包后无法显示内容的原因及解决办法。主要聚焦于如何正确配置路径，确保静态资源能够被正确加载。
vue 项目打包命令是：npm run build
如果打包后打开index.html页面看不到内容，有可能就是路径不对，需要修改config/index.js文件
如下：
 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),


    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',//此处为修改的地方，这里加. 
..........
}
vue build打包之后首页白屏的问题
Lee的博客
12-23 1万+
问题描述 本地的vue项目在server端浏览没问题，但是执行npm run build 打包之后在本地预览是白屏。有很多js,css无法加载。 1.解决方法 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子。 2.在build文件夹中打开webpack.prod.conf.js 找到output：增加...
vue项目打包后部署服务器访问页面,Vue项目打包后,部署在服务器,访问页面出现空白一片...
weixin_39768917的博客
08-02 1658
"好一似,食尽鸟投林,只剩下白茫茫大地,倒也真干净!"html''Vue项目打包后,部署在服务器,访问页面出现空白一片, 到也真干净!"vue一. Vue项目打包循序渐进的开发完程序后, 每一个厨艺精湛的程序猿都迫切的想打包部署运行. 可是, 程序猿的世界,不如意的事情,十之九九.nginx运行这个牛X的指令, 并以下图同样,即打包成功了.vue-clinpm run build 二.部署运行将...
vue项目打包之后页面空白解决办法
Dreamer_xr的博客
11-05 6781
之前项目遇到个情况，npm run build打包之后上传到服务器后，index.html打开一片空白，资源都加载了，但是就是不显示。 然后百度找了原因，修改了两处地方 一、修改 assetsPublicPath  在config/index.js里面，有个 assetsPublicPath 属性，源码是‘/’，修改成‘./’，加个点 assetsPublicPath: '/', 二、...
解决vue 打包发布去#和页面空白的问题
12-12
1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTownWebApp/',//这个地方使用绝对路径很重要 /** * Source Map
Vue项目打包后不能正常显示页面
weixin_43476677的博客
03-28 1万+
项目场景： 通过 Vue CLI 创建的 vue 项目，编写完项目后，通过 npm run bulid 对项目进行打包，再把打包得到的内容（dist文件夹）交给后端部署到服务器上。 问题描述： 对 vue 项目打包后，发现 dist文件中的 index.html 在浏览器中打开后页面内容无法显示，部署到服务器也一样不行，而 vue 项目在本地服务器运行时，页面是正常的。 本地服务器运行的首页： 打包后dist文件夹中的首页： 没看错，是真的什么内容都没有 原因分析： vue 项目中缺少了 vue
使用vscode在使用npm运行vue项目时出现无法访问localhost情况，找不到页面
weixin_51983847的博客
08-28 1793
原因分析：index.html被移到了public下的static文件夹下，目录错了将index.html页面从public移动至根目录package.json同一级目录下，问题得以结解决。
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
11-20
本地开发没问题能正常请求到接口，部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题。 经过查询得知：Remote Address代表的是当前HTTP...
Vue项目打包部署到iis服务器的配置方法
10-16
Vue项目开发完成后，需要通过打包工具如Webpack将其打包成静态资源，以便部署到服务器上。IIS (Internet Information Services) 是Windows系统上的一种Web服务器。在将Vue项目部署到IIS服务器上时，会遇到一些配置...
解决Vue 项目打包后favicon无法正常显示的问题
12-07
因此，当尝试了上述配置后仍然看不到效果，可以尝试清理浏览器缓存或者使用隐私模式重新访问页面。 通过以上步骤，通常可以解决Vue项目打包后favicon无法正常显示的问题。需要注意的是，这种方法适用于使用webpack...
vue打包后显示空白正确处理方法
08-28
总的来说，解决 Vue 打包后显示空白页的问题需要细心排查，从项目配置到浏览器端的错误信息，每一步都可能成为关键。记住，每个项目的具体情况可能会有所不同，所以不要怕花时间去分析和调试。同时，保持项目结构...
vue打包后获取不到数据_vue 打包后，如何修改接口地址？
weixin_39805387的博客
01-31 1323
bug收集：专门解决与收集bug的网站网址：www.bugshouji.com01背景在 vue 项目中，我们可以通过不同的环境，访问不同的服务器. 虽然可以使用环境的切换，但是在打包成html文件后，想对其进行修改就不行了。// 环境的切换if (process.env.NODE_ENV == 'development') { axios.defaults.baseURL...
Vue项目打包后页面空白的问题
qq_49841234的博客
03-06 1974
第一种情况 资源加载失败 报错如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-thgdjh12-1646450652321)(file://D:/soft/Gridea/yuanwenjian/post-images/1644893370600.png)] 这个问题是由于路径的问题，我们可以在项目下新建一个 vue.config.js 文件，在里面我们输入如下代码 module.exports = { publicPath:'./' } 再重新进行打包就可以了，
vue项目打包上传OSS，无法浏览，页面为空白
weixin_42418774的博客
07-20 1750
需求： vue项目命令打包：npm runbuild 生成dist文件，但是dist文件下的index.html打开是空白页，上传到OSS上也是如此 一、解决办法 在config/index.js目录下修改路径 二、解决办法 在webpack.base.conf.js中修改publicPath 三、解决方法 由于把路由模式mode设置成history了，默认是hash。 解决方法：路由里边router/index.js路由配置里边默认模式是hash，如果你改成了history模..
vue页面不显示
weixin_48927323的博客
05-25 5371
-某个页面东西忘记了没写完......--哪里挂载vue上的什么东西干扰到。--检查路由配置，书写书否规范正确。页面死活不显示以及不报任何错误。--查找是否有中文路径。2.不要使用中文路径。
vue打包后dist目录下的index.html网页显示空白的问题
XWQ_Q7的博客
11-20 538
vue打包后dist目录下的index.html网页显示空白的问题
为什么Vue打包出来的项目是空白页面？
Alanrnzearn的博客
07-08 3666
        有时候稍微没注意，用Vue打包出来的项目经过本地直接打开时发现竟然是空白页面！         1. 最直接的原因就是在打包项目的时候忘记创建vue.config.js文件了，这个时候在原Vue项目底下新建vue.config.js文件，内容为： module.exports = { publicPath:'/', out
vue项目启动后，页面显示空白
猪儿君的博客
03-24 1万+
XXXX is not defined
vue项目打包后页面出现空白
热门推荐
qq_24882601的博客
05-23 1万+
相信很多刚刚接触vue的伙伴会遇到这样的问题，就是说vue项目在开发环境下一切正常，但是打包之后，打开index.html页面却是一片空白，打开控制台发现这样的错误 出现这种情况要分两个处理方式（vue-cli2和vue-cli3），先说vue-cli2； 首先找到config/index.js文件，将assetPublicPath的路径改为“./”即可， vue-cli3...
VUE打包后不显示问题
qiankui的博客
06-09 3531
在运行 npm run bulid后，打开dist目录下打包好的文件，不显示仍和数据 页面打开一片空白，原因是打包时，路径不对 解决办法： 在根目录新建 vue.config.js ，这个文件是vue规定好的，专门用来做bulid里面的配置 module.exports={ baseUrl: process.env.NODE_ENV=='production'?'./':'/...
vue项目打包后空白问题
最新发布
04-01
<think>嗯，用户遇到了Vue项目打包后出现空白页面的问题，需要解决。这个问题在Vue项目中比较常见，可能有很多原因。首先，我得回忆一下常见的导致空白页的情况。 首先想到的是路由配置问题。如果使用的是history模式，可能需要服务器配置，否则在刷新或直接访问子路由时会出现404或者空白页。这时候需要检查服务器是否配置了回退到index.html的规则，比如Apache的.htaccess或者Nginx的try_files指令。用户可能在本地开发时使用的是hash模式，所以没问题，但打包后用了history模式导致问题。 然后是静态资源路径错误。Vue项目打包后，默认的静态资源路径是绝对路径，如果部署到子目录下，可能需要设置publicPath。比如，如果项目部署在example.com/myapp/，那么publicPath应该设为&#39;/myapp/&#39;，否则资源加载不到，页面空白。用户可能没有正确配置vue.config.js中的publicPath选项。 另外，代码中的错误也可能导致空白页。比如，某些地方有未处理的错误，或者异步加载组件失败。这时候需要检查浏览器的控制台有没有报错，或者网络请求是否失败。可能用户没有正确处理异步组件，或者环境变量配置有问题，导致生产环境代码出错。 还有可能是浏览器缓存的问题。有时候旧版的代码被缓存，导致新部署的版本没有正确加载。这时候可以尝试清除缓存或者强制刷新页面。 另外，需要检查是否所有的依赖都正确安装，特别是生产依赖。有时候开发环境没问题，但生产环境缺少某些依赖会导致问题。比如，某些只在开发时使用的包可能在构建时被忽略，但代码中却引用了它们。 还有可能是Vue Router的base配置不正确。如果项目部署在子路径下，需要在Vue Router中设置base选项，否则路由可能无法正确匹配。 另外，Webpack打包时的代码分割或懒加载配置如果有问题，也可能导致某些模块加载失败，从而出现空白页。这时候可以检查dist目录下的文件是否完整，或者是否有错误的chunk文件。 总结一下，可能的解决步骤包括： 1. 检查路由模式是否正确配置，服务器是否有相应的设置。 2. 确认静态资源路径publicPath是否正确。 3. 检查浏览器控制台和网络请求，定位具体错误。 4. 确保所有依赖正确安装，特别是生产依赖。 5. 处理可能存在的代码错误或异步加载问题。 6. 清除浏览器缓存或部署时添加版本控制。 7. 检查Vue Router的base配置是否正确。 用户可能需要根据这些可能性逐一排查。比如，先看控制台有没有404错误，如果有的话可能是资源路径问题或者路由配置问题。如果没有错误，可能是代码中有未捕获的异常导致应用崩溃。此外，确保vue.config.js中的配置正确，比如设置publicPath为&#39;./&#39;相对路径，可以解决资源加载问题。如果使用history模式，服务器需要配置支持，否则使用hash模式可能更简单。</think>### Vue项目打包后空白页面解决方案 #### 1. 静态资源路径配置问题 - **现象**：打包后资源路径错误导致文件无法加载。 - **解决方案**：在$vue.config.js$中设置正确的$publicPath$： ```javascript module.exports = { publicPath: process.env.NODE_ENV === &#39;production&#39; ? &#39;./&#39; : &#39;/&#39; // 使用相对路径[^1] } ``` - **验证方法**：检查$dist/index.html$中的资源引用路径是否以`./`开头 #### 2. 路由模式配置问题 - **History模式**：需服务器配置URL重定向 ```javascript const router = new VueRouter({ mode: &#39;history&#39;, // 需要服务器支持[^3] routes: [...] }) ``` - **备用方案**：使用hash模式 ```javascript mode: &#39;hash&#39; // 默认模式，无需服务器配置 ``` #### 3. 异步组件加载失败 - **优化配置**：在$router.js$中添加错误处理 ```javascript const router = new VueRouter({ routes: [ { path: &#39;/dashboard&#39;, component: () => import(/* webpackChunkName: "dashboard" */ &#39;./views/Dashboard.vue&#39;) .catch(() => window.location.reload()) // 重载页面应对网络问题 } ] }) ``` #### 4. 浏览器缓存问题 - **部署方案**：在构建命令中添加版本控制 ```bash # package.json "scripts": { "build": "vue-cli-service build --modern --no-cache" } ``` #### 5. 依赖完整性验证 ```bash # 清除旧依赖并重新安装 rm -rf node_modules rm package-lock.json npm install ``` #### 6. 服务端配置示例 **Nginx配置**： ```nginx location / { try_files $uri $uri/ /index.html; # 支持history模式[^3] } ``` **验证流程**： 1. 执行$npm run build$生成dist目录 2. 本地测试： ```bash npm install -g serve serve -s dist ``` 3. 打开浏览器控制台检查网络请求状态 #### 7. 代码规范检查 - 确保没有未处理的Promise拒绝： ```javascript // main.js window.addEventListener(&#39;unhandledrejection&#39;, event => { console.warn(&#39;Unhandled promise rejection:&#39;, event.reason) }) ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值