Vuejs2 + Webpack框架里,模拟下载的实例讲解


Posted in Javascript onSeptember 05, 2018

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

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

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

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

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

* 演示项目 *

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

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

App.vue

<template>
 <div>
 <router-view></router-view>
 </div>
</template>
<script>
export default {
}
</script>

home.vue

<template>
 <div class="home-wrapper">
  <span class="my-style">这里是首页</span>
  <!-- 下载链接 -->
  <a href="/test.docx" rel="external nofollow" rel="external nofollow" >下载</a>

  <!-- 触发 url-loader,使得 url-loader 处理 word 文档。 -->
  <img v-show="isShow" src="./test.docx"/>
 </div>
</template>
<script>
export default {
 data(){
  // 隐藏包含 word 文档路径的 img 标签。
  return {isShow:false};
 }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.home-wrapper{
 .my-style{
  width:900px;
  height:600px;
  float:right;margin-right:200px;
  padding-top:100px;
  color:#FF0000;
 }
}

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router'
import VueSuperagent from 'vue-superagent'
import 'babel-polyfill';

Vue.use(VueRouter);
Vue.use(VueSuperagent);

const router = new VueRouter({
 mode: 'history',
 routes
})

new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

router.js

import Home from './home.vue'

export default [{
 path:'/',
 component:Home
}]

.babelrc

{
 "presets": [
 ["latest", {
  "es2015": { "modules": false }
 }]
 ]
}

index.template.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>blog02</title>
 </head>
 <body>
 <div id="app">
  <router-view></router-view>
 </div>
 <!--<script src="/dist/[name].[chunkhash].js"></script>-->
 </body>
</html>

package.json

{
 "name": "blog02",
 "description": "CSDN blog02",
 "version": "1.0.0",
 "author": "",
 "private": true,
 "scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
 "dependencies": {
  "babel-polyfill": "^6.23.0",
  "vue": "^2.2.1",
  "vue-router": "^2.3.0",
  "vue-superagent": "^1.2.0"
 },
 "devDependencies": {
  "babel-core": "^6.0.0",
  "babel-loader": "^6.0.0",
  "babel-preset-latest": "^6.0.0",
  "cross-env": "^3.0.0",
  "css-loader": "^0.25.0",
  "file-loader": "^0.9.0",
  "html-webpack-plugin": "^2.28.0",
  "node-sass": "^4.5.0",
  "rimraf": "^2.6.1",
  "sass-loader": "^5.0.1",
  "url-loader": "^0.5.8",
  "vue-loader": "^11.1.4",
  "vue-template-compiler": "^2.2.1",
  "webpack": "^2.2.0",
  "webpack-dev-server": "^2.2.0"
 }
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
 entry: {
  app: ['./src/main.js'],
  // 把共用的库放到vendor.js里
  vendor: [
   'babel-polyfill',
   'vue',
   'vue-router',
   'vuex'
  ]
 },
 output: {
 path: path.resolve(__dirname, './dist'),

 // 因为用到了 html-webpack-plugin 处理HTML文件。处理后的HTML文件都放到了
 // dist文件夹里。html文件里面js的相对路径应该从使用 html-webpack-plugin 前
 // 的'/dist/' 改成 '/'
 publicPath: '/',
 // publicPath: '/dist/',
 filename: '[name].[hash].js'
 // filename:'build.js'
 },
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
   loaders: {
   // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
   // the "scss" and "sass" values for the lang attribute to the right configs here.
   // other preprocessors should work out of the box, no loader config like this necessary.
   'scss': 'vue-style-loader!css-loader!sass-loader',
   'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
   }
   // other vue-loader options go here
  }
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
  },
  // font loader
  {
  test: /\.(ttf|eot|woff|svg)$/i,
  loader: 'url-loader'
  },
  // 图片处理
  {
  test: /\.(png|jpg|gif)$/,
  loader: 'url-loader',
  options: {
   limit: '1000',
   name: '[name].[ext]?[hash]'
  }
  },
  // 处理模拟下载文件
  {
  test: /\.(docx)$/,
  loader: 'url-loader',
  options: {
   limit: '10',
   name: '[name].[ext]'
  }
  }
  // {
  // test: /\.(png|jpg|gif|svg)$/,
  // loader: 'file-loader',
  // options: {
  //  name: '[name].[ext]?[hash]'
  // }
  // }
 ]
 },
 plugins:[
 // 把共用的库放到vendor.js里
 new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
 // 编译HTML。目的:在生产环境下,为了避免浏览器缓存,需要文件按照哈希值重命名。
 // 这里编译可以自动更改每次编译后引用的js名称。
 new HTMLPlugin({template: 'index.template.html'})
 ],
 resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js'
 }
 },
 devServer: {
 historyApiFallback: true,
 noInfo: true
 },
 performance: {
 hints: false
 },
 devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
 module.exports.devtool = '#source-map'
 // http://vue-loader.vuejs.org/en/workflow/production.html
 module.exports.plugins = (module.exports.plugins || []).concat([
 new webpack.DefinePlugin({
  'process.env': {
  NODE_ENV: '"production"'
  }
 }),
 new webpack.optimize.UglifyJsPlugin({
  sourceMap: true,
  compress: {
  warnings: false
  }
 }),
 new webpack.LoaderOptionsPlugin({
  minimize: true
 })
 ])
}

以上这篇Vuejs2 + Webpack框架里,模拟下载的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
Bootstrap基础学习
Jun 16 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
js Array.slice的8种不同用法示例
Jul 10 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 #Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 #Javascript
解决vue点击控制单个样式的问题
Sep 05 #Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 #Javascript
vuejs点击class变化的实例
Sep 05 #Javascript
jQuery滑动效果实现方法分析
Sep 05 #jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 #Javascript
You might like
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python 字典(Dictionary)操作详解
2014/03/11 Python
python sort、sorted高级排序技巧
2014/11/21 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
决定成败的关键——创业计划书
2014/01/24 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
弄虚作假心得体会
2014/09/10 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书