vue webpack打包后显示的网页是空白

ponGISer

已于 2022-06-05 06:43:01 修改

阅读量3.7k

点赞数 3

分类专栏： Vue 文章标签： vue webpack

于 2020-04-01 23:22:57 首次发布

本文链接： https://blog.csdn.net/u011332271/article/details/105258634

版权

Vue 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

使用了webpack开发vue项目，在项目开发完成后，使用命令：npm run build对项目进行打包，打包结果如下：
在这里插入图片描述
但是将dist文件发布后，打开发现浏览器页面是空白的：

原因：
这个是因为webpack打包的时候引入js时使用的是绝对路径导致的。
修改webpack打包文件中的配置：
1.在webpack.prod.conf.js中增加publicPath:’./’ ；
2.util.js中增加publicPath:’./’；
3.config/index.js修改assetsPublicPath：‘./’;
具体如下：
webpack.prod.conf.js
在这里插入图片描述
util.js：

config/index.js：

修改完成后，再重新使用命令 npm run build ；打包后的项目就可以使用了！！！

关注博主即可阅读全文

优惠劵

ponGISer

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue webpack打包后显示的网页是空白

使用了webpack开发vue项目，在项目开发完成后，使用命令：npm run build对项目进行打包，打包结果如下：但是将dist文件发布后，打开发现浏览器页面是空白的：原因：这个是因为webpack打包的时候引入js时使用的是绝对路径导致的。修改webpack打包文件中的配置：1.在webpack.prod.conf.js中增加publicPath:’./’ ；2.util.......
复制链接

扫一扫

专栏目录

新员工webpack打包后上传服务器页面空白

前端程序员、项目经理、人工智能博主

10-31

360

某天同事小白使用了开发vue项目，在项目开发完成后，使用命令：npm run build对项目进行打包后发布服务器页面显示空白排查后发现：webpack打包的时候引入js时使用的是绝对路径导致的。

vue+webpack 打包文件 404 页面空白的解决方法

11-30

最近用vue-cli+vue-router+webpack建立项目，其中的遇到的三个问题，整理如下： vue-cli+ webpack 建立的项目，cnpm run build 打包项目之后，需要放在http服务器上才可以运行，例如：nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的，所以会出现刷新页面404的问题，需要设置所有找不到的路径直接映射到index.html 1 刷新页面404 配置启动文件的index页面的路径root: D:/workPlace/mex-adx-web/mex-adx-web/dist 2 二级页面刷新报错：打包的项目静态

参与评论您还未登录，请先登录后发表或查看评论

解决vue 项目使用webpack打包后，直接打开dist文件夹下的index.html页面空白的问题

sinat_41501316的博客

07-09

5376

问题描述 vue项目完成后，输入npm run build命令，会生成dist文件，本地打开dist/index.html，一般页面为空，或者报错找不到css和js文件，则需要更改一些路径参数，改成相对当前目录，然后再次运行npm run build 就可以在本地打开index.html。解决办法修改1：将config/index.js文件的assetsPublicPath: ‘/’; 改为assetsPublicPath: ‘./’; 修改2：将build/webpack.base.confg..

webpack打包结果的分析

最新发布

m0_67810366的博客

03-19

1160

webpack在打包好的js文件里，首先定义了一个iife（自执行函数）。在自执行函数里，Webpack会创建一个__webpack_modules__对象，该对象包含了所有模块的定义。这个过程是Webpack构建过程的开始，它将所有模块的代码整合在一起，这个对象的key就是模块的路径，而value是一个function，这个函数里就是存放我们写的模块源码。然后webpack会定义一个模块缓存对象__webpack_module_cache__和一个模块加载函数__webpack_require__。

vue2.0 打包发布完整版解决页面空白

weixin_48313011的博客

11-22

2562

vue+element 打包发布配置

webpack打包后的文件夹是空的_vue+webpack 打包文件 404 页面空白的解决方法

weixin_39677419的博客

12-19

154

最近用vue-cli+vue-router+webpack建立项目，其中的遇到的三个问题，整理如下：vue-cli+ webpack 建立的项目，cnpm run build 打包项目之后，需要放在http服务器上才可以运行，例如：nginxvue单页面的启动页面是index.html,路由的路径实际是不存在的，所以会出现刷新页面404的问题，需要设置所有找不到的路径直接映射到index.htm...

解决webpack打包后，直接打开index.html为空白页面的问题

weixin_44151377的博客

08-30

2667

解决webpack打包后，直接打开index.html为空白页面的问题使用webpack打包后会生成dist文件，直接打开dist下的html为空白 1、原因是请求js文件的路径错误，导致vue组件没有挂载到根目录下 2、解决方法：在配置production环境的文件中，将publicPath设置为"./" 3、再次npm run build进行打包，打开html就会显示相应内容各位大佬，有更好的解决方法欢迎分享，谢谢~ ...

vue使用webPack打包，显示空白

ooohana_的博客

06-12

336

config文件夹里面index.js文件把build里面的assetsPublicPath属性改成'./'

vue 使用 webpack 打包上线后页面空白，页面报错或者资源加载不到

xiao_yu_liu的博客

09-20

3564

webpack publicPath 文档 vue router base 属性文档 1、webpack的原因在webpack 打包过程中，有一个配置属性，它允许您指定应用程序中所有资产的基本路径。如果不配置这个属性，页面打包后，所有资源的加载 URl ，是默认的当前的一个路径，但是当你放到服务器上的时候，你从浏览器请求，这个时候请求的 url 上可能会带一些路径这个时候。...

webpack打包页面空白的解决方法

04-24

874

转载于:https://www.cnblogs.com/thankyouGod/p/8926776.html

vue webpack打包后图片路径错误的完美解决方法

10-17

主要介绍了vue webpack打包后图片路径错误的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

vue项目打包后打开页面空白解决办法

01-21

网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的...

解决vue+webpack打包路径的问题

11-27

仔细探索后发现是vue-router搞得鬼。因项目需要，所以使用了滚动行为，滚动行为必须开启history模式，在vue-router官方文档中有这么一句话：当你使用 history 模式时，URL 就像正常的 url，例如 http:/

html模板文件打开空白,Webpack打包index打开空白

weixin_32279911的博客

06-19

319

不做配置的话，Vue提供的webpack模板 npm run build打包之后打开dist/index.html是空白的打开浏览器调试，文件未找到查看Element路径是根目录下，所以并没有相应资源解决方法：config/index.js中的module.exports.build.assetsPublicPath由根目录/改为相对路径./build: {// PathsassetsRoot: ...

Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决

技术共享，共同进步！

04-11

2174

Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决

vue项目打包后一片空白解决办法

weixin_42017221的博客

02-17

313

src里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。

vue webpack init 创建项目打包出错（webpack打包空白页） --解决方案

weixin_43677787的博客

01-15

235

1.npm run build 报错信息解决方案：build文件夹–>utils.js–>cssLoader(ctrl+f) --> 添加 const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap, minimize: true } } 解决报错成功。 2. dist文件夹下–>index.html(打开) 问题：显示空

webpack创建的vue项目在IE中打开空白

danger_man的博客

12-28

789

公司的项目正常开发的时候一直用的chrome，没什么问题，最后部署后，发现项目在ie浏览器中打开空白控制台报缺少 " ) " ；无法获取未定义或 null 引用的属性 “call” 通常处理办法是 1、npm i --save babel-polyfill 2、在main.js中引入 import “babel-polyfill” 3、在webpack.base.conf.js 中替换为 app: [“babel-polyfill”, “./src/main.js”] 一般这样就可以解决ie不兼容es

webpack + vue 打包后本地运行网页空白

06-08

如果你使用 webpack + vue 打包后本地运行网页空白，可能是因为打包后的文件路径不正确，导致页面无法正确加载。你可以尝试以下几个解决方案： 1. 检查打包后的文件路径是否正确，确保所有的文件都被正确地打包到...