前言
最近初步完成了 vue仿某商城购物车 , 上传至 github , 并实现一个简单的预览功能 , 遇到一些问题 , 分享一下解决的过程
打包 Vue 项目
vue 项目完成时 , 执行以下命令
npm run build
实际上此命令就是执行 build.js 文件 , 将项目打包成静态资源 , 项目根目录下会多出一个 dist 文件夹
static 文件下包括项目打包后的 css、js、img、fonts (字体图标)
项目资源无法加载
但打开 dist 下 index.html 文件 , 页面却显示空白 , F12 打开控制台查看
发现并没加载任何 css、js 文件 , 解决办法如下：
打开根目录 config 下的 index.js , 找到如下代码：
将 assetsPublicPath: '/' , 改为 assetsPublicPath: './' 或 assetsPublicPath: ''
保存 , 运行 npm run build , 在新生成的 dist 下打开 index.html , 页面结构正常显示 , 但是页面字体图标和 mock 的数据无法正常加载
字体图标无法加载
页面中用 background 加载的图片可以正常显示 , 但是所有的字体图标都不能正常显示 , 解决办法如下：
打开根目录 build 下的 utils.js , 找到如下代码：
fallback: 'vue-style-loader' 下添加 publicPath: '../../'
保存 , 运行 npm run build , 在新生成的 dist 下打开 index.html , 页面字体图标正常显示
Mock 数据无法正常加载
项目的绝大部分页面内容是通过在跟目录下创建的 data.json 文件渲染到页面上的 , 是模拟从后端请求数据的 , 开发调试时用 npm run dev 命令 , 会借助node启动一个本地服务器 , 可以正常的渲染出相应的数据。而通过打包后的项目时属于静态资源的 , 点击 index.html , 是无法加载 mock 的数据的 , 浏览器也会报跨域的错误。若想正常的加载 mock 数据 , 最好的方式是讲打包后的资源丢到服务器中 , 或者使用 jsonp 请求线上真实数据，因为它的原理是利用 script 标签来获得数据 , 在github 上是可以预览的
使用 git 命令将项目上传至 github
项目文件夹内打开 Git Bash Here , 输入
git init
把文件添加到版本库中 , 不要忘记后面的小数点"." , 添加文件夹下的所有文件
git add .
把文件提交到仓库 , 引号内为提交说明
git commit " update message"
关联远程库
git remote add origin 仓库地址 (例如:https://github.com/LixingY/smartisanpay.git)
将项目所有 push 文件到仓库中
git push -u origin master
后期执行 git push 即可
github 在线预览
github 预览是需要利用 GitHub Pages , 点击项目仓库 Settings , 找到 GitHub Pages , 切换到 master branch
地址生成了 , 如无法预览 , 地址后面加上 /dist 即可
心得
github 作为星球上最流行的开源托管服务的分布式网站 , 作为程序员 , 掌握基本 github 使用方法 , 无论是对于分享、托管自己的项目 , 还是查阅其它优秀的开源项目 , 都是十分有帮助的
Tips: git 常用命令
git init 配置git
git add . 更新所有文件
git commit 提交文件至仓库
git status 查看状态
git diff 查看改动说明
git remote 查看远端服务器别名 , 加上 -v 显示 url 信息
git remote add server_url local-alias 添加远端服务器
git clone project_url local_alias 拷贝项目到本机中
git push server_url/local-alias 更新远端服务器仓库
git pull server_url/local-alias 更新本地服务器仓库
--------------------------------------------------------------------------------------------- EOF ----------------------------------------------------------------------------------------------------