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

5 篇文章 2 订阅

webpack publicPath 文档

vue router base 属性 文档

1、webpack的原因

在 webpack 打包过程中,有一个配置属性,它允许您指定应用程序中所有资产的基本路径。

如果不配置这个属性,页面打包后,所有资源的加载 URl ,是默认的当前的一个路径,

但是当你放到服务器上的时候,你从浏览器请求,这个时候请求的 url 上可能会带一些路径

这个时候。资源就请求不到了。

不配置情况:

配置情况:

2、vue 的原因

在 vue 项目中使用 vue router 的过程中,当你使用 history 模式的情况下,发现打包上线后,也没有报错,资源也都加载到了,但是页面空白,这个时候,很可能就是 router base 属性的问题。

看文档:

使用这个的前提是:打包后的项目线上路径不在根路径下。就需要使用 base 属性,来告知 项目路由去哪里找这些文件。 

另外,除了这样的配置外,还是需要服务端做对应的配置的,

如下是 nginx 的例子:

location / {
  try_files $uri $uri/ /index.html;
}

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值