旁观自己 善待朝夕|

猫老板的豆

园龄:9年4个月粉丝:52关注:0

关于vue-cli项目build后本地和github pages预览问题

前言

最近在初步完成自己的掘金移动端App后,想要上传到github,并且制作一个简单的预览功能,期间遇到了一些问题,分享在此,以便查阅。


打包Vue项目

当Vue项目完成后,在根目录下打开命令行,输入命令:

npm run build

实际上此命令就是执行build.js文件,将项目打包成静态资源。
此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有:

这里写图片描述

static文件下包括项目打包后的css、js、img、fonts(字体图标)。


项目资源无法加载

点击index.html,浏览器显示该页面是空白的,打开控制台看到:

这里写图片描述

这里看到index.html文件中没有加载任何css、js文件,解决方法:
打开项目根目录 config 下的 index.js 文件,进行如下修改:
这里写图片描述
将 assetsPublicPath: ‘/‘, 改为 assetsPublicPath: ‘./‘,
保存后重新’npm run build’,在新生成的dist目录下点开index.html,这时页面结构正常显示出来了,但是页面字体图标和mock的数据无法正常加载。


字体图标无法加载

页面中用background加载的图片可以正常显示,但是所有的字体图标都不能正常显示,解决方法:打开根目录下 build 中的 utils.js 文件,在控制build样式文件代码中添加 publicPath: ‘../../‘, 如下:

这里写图片描述

保存后,依旧重新’npm run build’,打开dist目录下的index.js可以看到字体图标正常显示了。
这里为什么需要这样修改,可以参考https://github.com/vuejs-templates/webpack/issues/166


Mock数据无法正常加载(我的做法是把模拟的json数据放到cdn上,跳过这一步)

此项目的绝大部分页面内容是通过在跟目录下创建的data.json文件渲染到页面上的,是模拟从后端请求数据的,开发调试时用’npm run dev’命令,会借助node启动一个本地服务器,可以正常的渲染出相应的数据。而通过打包后的项目时属于静态资源的,点击index.html查看项目,是无法加载mock的数据的,浏览器也会报跨域的错误。若想正常的加载mock数据,最好的方式是讲打包后的资源丢到服务器中,或者使用jsonp请求线上真实数据,因为它的原理是利用script标签来获得数据,在github上是可以预览到的。


npm run build 后本地和 github pages 都能正常展示 ~

原文

本文作者:猫老板的豆

本文链接:https://www.cnblogs.com/bingcola/p/16499238.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   猫老板的豆  阅读(168)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.