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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
javascript prototype,executing,context,closure
Dec 24 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
javascript基本算法汇总
Mar 09 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
js实现图片上传并预览功能
2018/08/06 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
车间统计员岗位职责
2014/01/05 职场文书
前台文员我鉴定
2014/01/12 职场文书
初二物理教学反思
2014/01/29 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
搞笑的获奖感言
2014/08/16 职场文书
2015年安全月活动总结
2015/03/26 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js