Vuejs2+Webpack框架里,模拟下载的实例讲解-创新互联

在实际的开发工作中,难免要配合销售人员,提前做一些前端的 DEMO 出来。这个时候往往还没有连接后端 API。假如要演示一个下载连接,那么应该如何做呢?

创新互联于2013年成立,我们提供高端网站建设、重庆小程序开发、电商视觉设计、app开发定制及网络营销搜索优化服务,在传统互联网与移动互联网发展的背景下,我们坚守着用标准的设计方案与技术开发实力作基础,以企业及品牌的互联网商业目标为核心,为客户打造具商业价值与用户体验的互联网+产品。

我们希望能够达成以下两点:

1、在开发环境下,我们可以在 webpack-dev-server 开发服务器上点击下载连接,点击后浏览器就能不下载文件。

2、当演示的时候,代码编译后放到 nginx 中。用户可以点击下载链接。nginx存放的都是业务代码。

那么如何做到这两点呢?假如我们要模拟下载一个 test.docx 文件。我们可以利用 url-loader 来对 .docx 文件做处理。可能有人会问:“url-loader 一般不是处理 img 标签里面的图片文件路径吗?”为了解决这个 img 标签的问题,我们可以在一个页面中加上隐藏的图片标签。最后加一个 a 标签: 下载。下面的篇幅要帮助读者搭建一个简单的项目,来演示这种方法。

* 演示项目 *

项目名称是blog02,项目目录结构如下:

blog02
 │
 ├─src
 │ ├─App.vue
 │ ├─home.vue
 │ ├─main.js
 │ ├─test.docx
 │ └─router.js
 │
 ├─.babelrc
 ├─index.template.html
 ├─package.json
 └─webpack.config.js

网页题目:Vuejs2+Webpack框架里,模拟下载的实例讲解-创新互联
当前路径:http://hbruida.cn/article/dgphse.html